cara membuat widget real time Covid19 pada Blogspot

April 17, 2020

Kotakubus. Cara membuat widget Real Time Virus Corona atau Covid-19 baik di Blogger ataupun WordPress cukuplah mudah teman teman .

beginilah cara singkat membuat Widget atau memasukan widget Covid-19 pada Blogspot :

1. buka Teta letak dan Klik Tambahkan widget

2. pilih Html ataupun Javascript 



3. masukan Kode script berikut 


Script kode
<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"></span></p>
</div></div></div>
<style>
.jagocard-body {margin: 0;padding: 15px;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>

5. Tekan Finish dan lihat hasilnya 

cara ini juga dapat di praktekan di Wordpress maupun laman web berbasis HTML dan javascript .

Cukup Mudahkan ? ayo dukung pemerintah untuk stay di rumah aja sambil baca ini blog :)

Bagi temen-temen yang mau buat Laman Covid-19 bisa baca disini 

Artikel Terkait

Previous
Next Post »