Membuat Widget Data Corona di Blog Ringan dan Responsif

cloteh.com - Coronavirus Disease atau COVID-19 saat ini sudah menjadi pandemi di hampir seluruh dunia. Virus ini sudah menjangkit sejumlah lebih dari 300.000 manusia di seluruh dunia. Dimana lebih dari 15.000 diantaranya harus meregang nyawa.

Indonesia merupakan negara yang juga ikut ter-invansi oleh virus jahat ini. Tercatat ada 579 orang positif corona dan 49 diantaranya meninggal dunia. Kabar baiknya, ada 30 orang sudah dinyatakan berhasil sembuh dari virus ini.

Kali ini, saya ingin berbagi widget statistik atau data suspect corona. Widget ini bisa dimanfaatkan untuk media informasi mengenai jumlah suspect atau korban pada halaman blog atau situs kamu.

WIDGET DATA CORONA COVID19 UNTUK BLOGGER

Widget ini saya ambil dari blog Siaga Covid19, dimana datanya diambil dari grab API atau JSON dari situs kawalcorona.com jadi data yang ditampilkan akan diperbarui secara otomatis dan realtime sesuai api pada situs tersebut.

Oh iya, widget ini saya buat hanya menggunakan Html sebagai kerangka, CSS sebagai designnya, dan Javascript untuk Get Data dari API nya. Karena hanya menggunakan 3 elemen dasar, maka widget ini bisa digunakan pada semua platform web, baik itu Blogger, Wordpress, atau lainnya.

Membuat Widget COVID-19

Untuk instalasinya silahkan ikuti panduannya di bawah ini :

1. Login pada blogger kamu

2. Pilih Tema dan klik Edit HTML

3. Cari kode </head> dan copy paste script di bawah ini di atas kode tadi : 

<style>
.covid-container {width : 100%; padding:20px; background-color:#54AAEC;color:#fff;border-radius:15px; font-size:18pt;
}
.covid-data {width:25%;display:inline-block;margin:5px;}
.covid-19 {text-align:center;}
.positif span {background-color:#ffbb00;border-radius:10px;padding-left:10px;padding-right:10px;}
.sembuh span {background-color:#03B403;border-radius:10px;padding-left:10px;padding-right:10px;}
.meninggal span {background-color:#BF4040;border-radius:10px;padding-left:10px;padding-right:10px;}
.covid-foot {top:10px; font-size:10pt; text-align:center;}
</style>

4. Lalu cari kode </body> dan paste kode berikut ini di atas kode tersebut :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var d = new Date();
$("#covid-update").html(d.getDate() + "/" + (d.getMonth()+1) + "/" + d.getFullYear() + "<br/>widget <a href='https://covid19.cloteh.com/'>Siaga Covid19 </a>");
    $.ajax({url: "https://api.kawalcorona.com/indonesia/", success: function(result){
     $("#positif").html(result[0].positif);
     $("#sembuh").html(result[0].sembuh);
  $("#meninggal").html(result[0].meninggal);
    }});
});
</script>

5. Simpan Tema

Selanjutnya kita pasang kode penampil datanya. Silahkan masuk ke  TATA LETAK dan tambahkan widget HTML/JAVASCRIPT di tempat yang kamu Inginkan. Misal di sidebar atau di header.

Pada kolom isi silahkan paste kode ini :

<div class="covid-container">
  <p>Update Data Covid-19 <strong>Indonesia </strong></p>
  <div class="covid-19">
  <div class="covid-data positif">
Positif<br/>
<span id="positif">mengambil data...</span>
<br/>orang
  </div>
  <div class="covid-data sembuh">
Sembuh<br/>
<span id="sembuh">mengambil data...</span>
<br/>orang
  </div>
  <div class="covid-data meninggal">
Positif<br/>
<span id="meninggal">mengambil data...</span>
<br/>orang
  </div>
  </div><hr/>
  <div class="covid-foot"> Data Diperbarui Pada :<span id="covid-update"></span></div>
  </div>

Lalu simpan dan lihat hasilnya.

Kamu bisa modifikasi CSS dan pada bagian HTML penampilnya. Saya menyarankan untuk tidak mengotak atik bagian javascriptnya. Sebab di dalamnya terdapat kode untuk Get API nya.

Sekian dari saya mengenai Widget Penampil Data Covid19 untuk Blogger. Jika kamu merasa ini penting kamu bisa bagikan ini ke teman yang lainnya. Terimakasih.