Cara Membuat Widget Real Time COVID- 19 di Blog

Hallo Semua. Balik lagi di Blog Webdikijrr, dikesempatan kali ini saya akan berbagi script Real Time COVID- 19 di blogspot

Kalian bisa lihat Contoh Widget yang saya pasang di blog seperti ini

Kalian bisa memasang widget ini di bawah post artikel atau di bawah widget home page.. 

Untuk Script nya kalian bisa Copy di bawah berikut

<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>

Untuk Cara Memasang Widget COVID- 19

  1. Buka Tata Letak
  2. Pilih Posisi yang anda Simpan
  3. Pilih HTML
  4. Paste Script dan Simpan
 Oke saya rasa cukup sampe disini. dan semoga bermanfaat

Komentar

Postingan populer dari blog ini

Cara Download Video IG, FB, dan YT Dengan Mudah 2020

Fakta Seputar Menara Saidah, Gedung yang Penuh Cerita Horor

Cara Menulis Artikel SEO Friendly 2020