Cara Membuat Widget Statistik Corona (COVID-19) di Blog

Cara Membuat Widget Statistik Corona (COVID-19) di Blog


Ambyarblog.com - Apa kabar? Pada kesempatan kali ini saya akan berbagi tutorial Cara Membuat Widget Statistik Corona (COVID-19) di Blog, seperti yang kita ketahui bahwasanya saat ini Virus Corona (COVID-19) yang terjadi di Indonesia sangat pesat sekali perkembangannya. Untuk memantau hasil statistik jumlah yang positif kita perlu memiliki statistik yang sesuai.
Cara Membuat Widget Statistik Corona (COVID-19) di Blog
Selain itu dengan widget ini pastinya pengunjung yang datang ke blog Anda akan mudah mengetahui perkembangan virus tersebut menggunakan widget ini.

Widget ini memiliki tampilan responsive baik melalui web maupun mobile.

Cara Membuat Widget Statistik Corona (COVID-19) di Blog

Langkah #1 - Silahkan buka dashboard Blogger anda.

Langkah #2 - Ke menu Tata Letak > klik Tambah Widget yang ingin Anda pasang > pilih HTML/JavaScript.

Langkah #3 - Silahkan Copy dan Paste kode dibawah ini tempat di widget tadi.
<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="indapkorange indapkshadow img-card">
<div class="indapkcard-body">
<div class="d-flex">
<div class="indapklogoindo"> <img src="https://kawalcorona.com/uploads/indonesia-PZq.png" width="50" height="50" alt="Positif" /> </div>
<p class="indapkcountry">COVID-19 INDONESIA</p>
<p class="indapkcorona"><b> <span id='terjangkit' class="indapkpositif"></span></b> POSITIF, <b><span id='sembuh' class="indapksembuh"></span></b> SEMBUH, <br/><b><span id='meninggal' class="indapkmeninggal"></span></b> MENINGGAL</p>
<p class="indapkupdate">Update Hari ini: <span id="date"></span></p>
</div></div></div>
<style>
.indapkcard-body {margin: 0;padding: 20px;position: relative;}
.indapkshadow{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}
.indapklogoindo {float: right;position: relative;top: 5px;}
.indapkorange {background: #55b0db;color: #fff !important;}
.indapkcountry{font-size:30px;margin:0px !important}
.indapkcorona{padding:5px 0px;margin:0px !important;line-height:30px}
.indapkupdate{font-size:20px;margin:0px !important}
.indapkpositif{padding:5px 7px 5px 5px;background: #f82649!important;}
.indapksembuh{padding:5px 7px 5px 5px;background: #09ad95!important;}
.indapkmeninggal{padding:5px 7px 5px 5px;background: #d43f8d !important;}
</style>
Langkah #4 - Jika sudah, silahkan klik tombol Simpan dan Selesai.

Penutup

Itulah Cara Membuat Widget Statistik Corona (COVID-19) di Blog, gimana mudah kan. Sampai disini dulu, apabila ada pertanyaan silahkan komen dibawah, semoga bermanfaat. Sekian dan terima kasih.

Anda mungkin menyukai postingan ini