Cara Membuat Widget Statistik Corona atau Covid-19 di Blogger

Jagoandzgn.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial mengenai bagaimana Cara Memasang Widget Statistik Corona di Blogger, seperti yang kita ketahui saat ini Virus Corona yang terjadi saat ini di Indonesia sangat pesat sekali perkembangan-nya, untuk bisa memantau hasil statistik jumlah yang terjangkit (positif) kita perlu memiliki hasil statistik yang sesuai.

Selain itu dengan memasang widget statistik ini pastinya pengunjung yang datang ke blog kamu mudah mengetahui perkembangan virus saat ini di Indonesia di widget tersebut. Widget tersebut saya dapatkan dari web kurazone yang memiliki tampilan yang sangat responsive baik melalui web maupun dari mobile.

Cara Membuat Widget Statistik Corona atau Covid-19 di Blogger

1. Silahkan kamu login ke blogger.com dengan menggunakan akun Gmail kamu.
2. Masuk ke TATA LETAK > klik Edit Widget yang ingin kamu pasang > Pilih HTML dan JavaScript.
3. Silahkan kamu copy kode dibawah ini dan paste di widget 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();
$("#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="jagoorange jagoshadow img-card">
<div class="jagocard-body">
<div class="d-flex">
<div class="jagologoindo"> <img src="https://kawalcorona.com/uploads/indonesia-PZq.png" width="50" height="50" alt="Positif"> </div>
<p class="jagocountry">COVID-19 INDONESIA</p>
<p class="jagocorona"><b> <span id='terjangkit' class="jagopositif"></span></b> POSITIF, <b><span id='sembuh' class="jagosembuh"></span></b> SEMBUH, <br/><b><span id='meninggal' class="jagomeninggal"></span></b> MENINGGAL</p>
<p class="jagoupdate">Update Hari ini: <span id="date"></p>
</div></div></div>
<style>
.jagocard-body {margin: 0;padding: 20px;position: relative;}
.jagoshadow{box-shadow: 0 5px 10px rgba(19, 191, 166, 0.3) !important;}
.img-card:before {content: '';position: absolute;background: url(https://kawalcorona.com/data/images/svgs/circle.svg);background-position: top right;background-repeat: no-repeat;width: 100%;height: 100%;opacity: 0.8;right:0px;top:0px}
.jagologoindo {float: right;position: relative;top: 5px;}
.jagoorange {background: #1589E3;color: #fff !important;}
.jagocountry{font-size:30px;margin:0px !important}
.jagocorona{padding:5px 0px;margin:0px !important;line-height:30px}
.jagoupdate{font-size:20px;margin:0px !important}
.jagopositif{padding:5px 7px 5px 5px;background: #f82649!important;}
.jagosembuh{padding:5px 7px 5px 5px;background: #09ad95!important;}
.jagomeninggal{padding:5px 7px 5px 5px;background: #d43f8d !important;}
</style>

4. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagaimana mudah bukan untuk tutorial Cara Memasang Widget Statistik Corona atau Covid-19 di Blogger, apabila kamu memiliki pertanyaan atau masalah seputar blogger silahkan komen di kolom komentar dibawah artikel ini.