Membuat Widget Data Corona di Blog Ringan dan Responsif

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.