Cara Membuat Widget Statistik Virus Corona COVID-19

BisablogDEMO.blogspot.com - Mumpung lagi banyak yang cari cara membuat widget statistik virus Corona COVID-19 di Indonesia, saya jadi iseng pengen bikin sendiri.

Btw untuk datanya diambil dari API situs kawalcorona.com. Jadi nanti data-datanya akan selalu update selama situs tersebut update. Pakai API ini kita sebenarnya bisa ngembil banyak banget data mulai dari data per provinsi, per negara, atau secara global. Tapi di sini saya pakai untuk yang khusus di Indonesia saja, jadi kita bisa tahu jumlah pasien positif, pasien sembuh, dan jumlah pasien yang meninggal.

Untuk contohnya, kamu bisa lihat di sidebar blog ini yang kayaknya bakal terus ada sampai Corona musnah (yang mudah-mudahan gak pake lama). Biar lebih jelas liat skrinsut ini aja yah,

Anyway, tutorial lengkapnya bisa langsung cek bisablog.com aja, masih ada dua widget lain yang bisa kamu salin scriptnya. Nah, buat widget yang ini, langsung ada salin scriptnya di gadget blogger atau Wordpress yah.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var d = new Date();
$("#date").html(d.getDate() + "/" + (d.getMonth()+1) + "/" + d.getFullYear());
    $.ajax({url: "https://api.kawalcorona.com/indonesia/", success: function(result){
     $("#terjangkit").html(result[0].positif);
     $("#sembuh").html(result[0].sembuh);
     $("#meninggal").html(result[0].meninggal);
    }});
});
</script>

<div class="bisablog-card">
    <div class="bisablog-info"><h2>DATA COVID-19 INDONESIA</h2></div>
    <p class="bisablog-positif">&#128567 Positif: <span id="terjangkit"></span></p>
    <p class="bisablog-sembuh">&#128522 Sembuh: <span id="sembuh"></span></p>
    <p class="bisablog-meninggal">&#128557 Meninggal: <span id="meninggal"></span></p>
    <div class="bisablog-info"><span><em>(Data: kawalcorona.com)</em></span></div>
</div>

<style>
.bisablog-card {padding: 5%; border:1px solid #eaeaea; background:#f4f4f4;border-radius:10px}
.bisablog-card p {color:#fff}
.bisablog-positif {background:#e53935}
.bisablog-sembuh {background:#43a047}
.bisablog-meninggal {padding:10px 7px; background:#546e7a}
.bisablog-positif, .bisablog-sembuh {padding:10px 7px; margin-bottom:1em}
.bisablog-info {text-align:center}
.bisablog-card p{font-weight:bold}
</style>

Dah, kalau ada pertanyaan seputar widget ini, langsung aja komen di bawah ini yah!

Share this post