Cara Membuat dan Memasang Widget Statistik Covid-19 Responsive di Blog Kamu

March 27, 2020

Tutorial

Hai, balik lagi bareng gw. Kali ini gw bakal share cara buat widget COVID-19 di blogger. Oke langsung aja ke tutorialnya.

1. Silahkan buka blog kamu, kemudian pilih menu Tata Letak - klik + Add a Gadget - HTML/Javascript
2. Silahkan pasetkan link ini pada kolom 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="adityaorange adityashadow img-card">
<div class="adityacard-body">
<div class="d-flex">
<div class="adityalogoindo"> <img src="https://kawalcorona.com/uploads/indonesia-PZq.png" width="50" height="50" alt="Positif"> </div>
<p class="adityaupdate">Update Hari ini: <span id="date"></p>
<p class="adityacountry">Info COVID-19 di Indonesia</p>
<p class="adityacorona"><b> <span id='terjangkit' class="adityapositif"></span></b> POSITIF<b>&nbsp;&nbsp;&nbsp;&nbsp;<span id='sembuh' class="adityasembuh"></span></b> SEMBUH<b>&nbsp;&nbsp;&nbsp;&nbsp;<span id='meninggal' class="adityameninggal"></span></b>MENINGGAL</p>
</div></div></div>
<style>
.adityacard-body {margin: 0;padding: 20px;position: relative;}
.adityashadow{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}
.adityalogoindo {float: right;position: relative;top: 5px;}
.adityaorange {background: #498CFB;color: #fff !important;border-radius: 10px;}
.adityacountry{font-size:30px;margin:0px !important}
.adityacorona{padding:5px 0px;margin:0px !important;line-height:30px}
.adityaupdate{font-size:16px;margin:0px !important}
.adityapositif{padding:5px 7px 5px 5px;background: #FF2047!important;border-radius: 10px;}
.adityasembuh{padding:5px 7px 5px 5px;background: #00C140!important;border-radius: 10px;}
.adityameninggal{padding:5px 7px 5px 5px;background: #333333 !important;border-radius: 10px;}
.adityawords{padding:5px 7px 5px 5px;background: #333333 !important;border-radius: 10px; align:center;}
</style>

3. Setelah itu save dan template sudah terpasang.

Jika ada pertanyaan silahkan tanyakan di komentar di bawah. Sehat selalu, stay at home dulu sampai kondisi membaik. Thanks!