Cara Memasang widget statistik Virus Corona atau Covid-19 di Blogger

Rz Officialツ    October 06, 2020    Blogger   

Memasang widget statistik Virus Corona atau Covid-19  di Blogger ternyata sangat mungkin dilakukan. Dengan sedikit kode program, Anda bisa ikut membantu pemerintah menyebarkan perkembangan terbaru Virus Corona kepada masyarakat.

Pemerintah sendiri sudah menyediakan ruang khusus bagi media untuk terus memperoleh update secara berkala. Tetapi, tentu segala cara perlu dicoba, termasuk peran blogger dan media untuk menyebarkan perkembangan terbaru secara meluas.

Memasang Widget Statistik Virus Corona (COVID-19) di Blogger.com

• Login ke Blogger.com
• Klik Tata Letak (Layout) kemudian di bilah kanan klik Tambahkan Gadget.

• Akan muncul popup baru yang menampilkan berbagai pilihan gadget. Pilih gadget HTML/Javascript.

• Selanjutnya, salin kode script di bawah ini.

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

• Pastekan ke dalam gadget HTML tadi dan simpan.

Hasilnya akan seperti ini.