cara membuat widget corona di blog

fagas official~indonesia adalah salah satu negara yang sudah terkena virus corona,oleh sebab itu banyak para blogger indonesia yang menaruh atau memasang widget statistik corona di blog mereka,walaupun ada sebagian blogger yang beranggapan widget ini tidak penting.menurut saya sebenarnya widget ini cukup karena akan memudahkan pembaca blog mengetahui jumlah atau statistik virus corona atau covid19 terbaru.

banyak sekali modal dan tipe dari widget ini,mulai dari yang keren,menarik dan yang simple,untuk sumber dari statistik virus corona ini dari http://kawalcorona.com/ sebuah situs yang menyediakan update corona setiap harinya,dengan begitu kita tidak perlu update sendiri secara manual karena data akan terus di perbarui selama situs tersebut masih tetap update.

cara membuat widget corona di blog

terlebih dahulu masuk blogger kalian masing masing

pilih tata letak > lalu pilih html/javacript

salin kode dibawah ini dan letakan di dalamnya

<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="fagasblue fagasshadow">
<div class="fagascard-body img-card">
<div class="d-flex">
<div class="fagaslogoindo"> <img src="https://kawalcorona.com/uploads/indonesia-PZq.png" width="50" height="50" alt="Positif" /> </div>
<p class="fagascountry">COVID-19 INDONESIA</p>
<p class="fagascorona"><b> <span id='terjangkit' class="fagaspositif"></span></b> POSITIF, <b><span id='sembuh' class="fagassembuh"></span></b> SEMBUH, <br/><b><span id='meninggal' class="fagasmeninggal"></span></b> MENINGGAL</p>
<p class="fagasupdate">Update Hari ini: <span id="date"></span></p>
</div></div></div>
<style>
.fagascard-body {margin: 0;padding: 20px;position: relative;}
.fagasshadow{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}
.fagaslogoindo {float: right;position: relative;top: 5px;}
.fagasblue {background: #1a73e8;color: #fff !important;}
.fagadcountry{font-size:30px;margin:0px !important}
.fagascorona{padding:5px 0px;margin:0px !important;line-height:30px}
.fagasupdate{font-size:20px;margin:0px !important}
.fagaspositif{padding:5px 7px 5px 5px;background: #f82649!important;}
.fagassembuh{padding:5px 7px 5px 5px;background: #09ad95!important;}
.fagasmeninggal{padding:5px 7px 5px 5px;background: #d43f8d !important;}
</style>

terakhir simpan dan lihat hasilnya

• DEMO

akhir kata

sekian tutorial cara membuat widget corona di blog semoga bermanfaat dan mudah dipahami,jika anda merasa bahwa artikel ini bermanfaat jangan lupa share dan untuk anda yang belum paham bisa ditanyakn melalui kolom komentar,terimakasih

Share this post