Cara Membuat Widget Real Time COVID- 19 di Blog

Post a Comment
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
Dicky Blog
Usia Bukan Sebuah Halangan Untuk Berkarya Tetap Kuat Menjalani Kehidupan Awali Hidup Dengan Senyuman

Related Posts

Comments

Subscribe Our Newsletter