Cara Memasang Widget Statistik Virus Corona COVID-19 Live

Cara memasang widget statistik virus Corona COVID-19 nampaknya menjadi buruan pada blogger yang ingin memberi update kepada pembaca mereka mengenai info pandemic tersebut di Indonesia.

Dengan widget tersebut, pembaca dapat mengetahui statistik seputar virus Corona di Indonesia tanpa harus bolak-balik ke situs berita atau situs resmi milik pemerintah.

Melihat banyaknya script untuk membuat widget ini di blog lain, saya tergelitik untuk membuat widget versi saya sendiri.

Untuk datanya saya menggunakan API dari situs kawalcorona.com yang menyediakan update statistik virus Corona setiap harinya. Dengan begitu kamu tidak perlu mengupdatenya lagi secara manual karena data akan terus diperbarui selama situs tersebut tetap update.

Without further ado, silahkan menyalin script untuk widget statistik virus Corona Covid-19 di bawah ini. Mudah-mudahan ada yang sesuai selera kamu yah!

Cara Memasang Widget Statistik Virus Corona COVID-19

Sebelum memasang widget Corona di bawah ini, kamu mungkin bisa memeriksa terlebih dahulu apakah di template yang kamu pakai sudah ada jQuery atau tidak. Jika sudah ada, kamu bisa menghapus kode untuk memanggil jQuery di bawah ini

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Untuk memasang script ini di Blogger, kamu hanya perlu masuk ke menu LAYOUT, tambahkan gadget baru HTML/JAVASCRIPT lalu salin kode di bawah.

Pada WordPress, kamu bisa masuk ke menu TAMPILAN ► WIDGET, pilih widget CUSTOM HTML lalu salin script di bawah.

1. Widget Statistik Corona COVID-19 Versi 1 (Simpel)

<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">
    <h2>DATA COVID-19 INDONESIA</h2>
    <p>Positif: <span id="terjangkit"></span>
  <br />Sembuh: <span id="sembuh"></span>
  <br />Meninggal: <span id="meninggal"></span>&nbsp;
</p>
<span><em>(Data: kawalcorona.com)</em></span>
</div>

<style>
.bisablog-card {padding:1.5em; background: linear-gradient(45deg, #42a5f5, #2196f3)}
.bisablog-card h2, .bisablog-card p, .bisablog-card span {color:#fff}
.bisablog-card h2 {border-bottom:2px solid #fff}
.bisablog-card p {font-weight:bold}
</style>

2. Widget Statistik Corona COVID-19 Versi 2 (Simpel)

<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>INDONESIA</h2></div>
    <div class="bisablog-flex">
        <div>
            <p><span id="terjangkit"></span></p>
            <p>Positif</p>
        </div>
        <div class="flex-middle">
            <p><span id="meninggal"></span></p>
            <p>Meninggal</p>
        </div>
        <div>
            <p><span id="sembuh"></span></p>
            <p>Sembuh</p>
        </div>
    </div>
    <div class="bisablog-info"><span><em>(Data: kawalcorona.com)</em></span></div>
</div>

<style>
.bisablog-card {padding:5%;border:1px solid #929292}
.bisablog-info {text-align:center;}
.bisablog-flex {display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap;}
.bisablog-flex p {font-weight: bold;text-align: center;}
.bisablog-flex span {color: #e53935}
.flex-middle {border-left:2px solid #eaeaea;border-right:2px solid #eaeaea;padding:0 1em}
</style>

3. Widget Statistik Corona COVID-19 Versi 3 (Simpel with Colored Label)

<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>

Sebagai catatan, script ini saya coba di template Blogger Viomagz. Jadi jika kamu memakai template lain tampilannya mungkin harus sedikit disesuaikan.

Widget Statistik Corona Memakai Data Global

Btw, semua data yang ada widget-widget ini nantinya hanya akan menampilkan data pasien dari Indonesia saja. Jika kamu ingin menampilkan data global, kamu bisa mengganti kode javascript di atas (antara <script> dan </script> dengan kode berikut ini:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
 $.ajax({url: "https://api.kawalcorona.com/positif/", success: function(result){
     $("#terjangkit").html(result.value);
    }});
 $.ajax({url: "https://api.kawalcorona.com/sembuh/", success: function(result){
     $("#sembuh").html(result.value);
    }});
 $.ajax({url: "https://api.kawalcorona.com/meninggal/", success: function(result){
     $("#meninggal").html(result.value);
    }});
});
</script>

Satu catatan lagi, jika kamu memakai dua widget statistik Corona, gunakan nama ID yang berbeda yah. Misalnya, widget statistik Corona Indonesia memakai ID $("#sembuh"), maka widget yang satunya memakai $("#sembuhglobal"). Dengan begitu data tidak bentrok dan dapat muncul pada kedua widget yang kam pasang.

Dan jika kamu memiliki saran atau pertanyaan seputar cara memasang widget statistik Corona di atas, silahkan tinggalkan komentar kamu di bawah ini yah!