Membuat widget data Corona Indonesia secara real-time di blog - Susah Tidur

Membuat widget data Corona Indonesia secara real-time di blog

Widget data covid-19 Indonesia Real-time

Halo selamat datang, pada kesempatan kali ini saya akan membagikan sebuah widget data covid-19 Indonesia yang pastinya akan update secara otomatis. Data ini ter update dari sumber terpercaya yaitu kawalcorona.com, jadi sobat tidak perlu kawatir saat ditanya sumber dari mana? ini hoax atau tidaknya.

Bicara soal Corona atau Covid-19, virus ini berasal dari hewan kelelawar. Virus ini pertama terjadi di China tepatnya kota Wuhan. Dalam bentang waktu yang begitu cepat virus ini sudah menyebar di belahan dunia. Ngerii.

Menurut situs organisasi kesehatan dunia (WHO), Corona sudah ditetapkan sebagai pandemi. Seluruh dunia sudah dalam keadaan darurat. Oleh sebab itu informasi sekecil apapun itu informasi tentang Corona akan sangat bermanfaat, Tapi jangan nebar berita Hoax ya!!

Cara membuat widget Covid-19 Indonesia

Disini saya akan membagikan 2 widget data Corona di Indonesia secara Real-time, dan Responsive. Data ini meliputi Positif, Meninggal, Sehat dari Corona atau Covid-19 di Indonesia. Baik beginilah tampilannya.

Widget Corona versi 1

Kodenya
<iframe src="https://covid19.ilmucoding.com/widget" width="100%" scrolling="no" height="250px" style="border:none;"></iframe>

Widget Corona versi 2

Kodenya
<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="penajaiborange penajaibshadow"> <div class="penajaibcard-body"> <div class="d-flex"> <div class="penajaiblogoindo"> <img src="https://kawalcorona.com/uploads/indonesia-PZq.png" width="50" height="50" alt="Positif" /> </div> <p class="penajaibcountry">COVID-19 INDONESIA</p> <p class="penajaibcorona"><b> <span id='terjangkit' class="susahtidurzzz penajaibpositif"></span></b> POSITIF,
<b><span id='sembuh' class="penajaibsembuh"></span></b> SEMBUH,
<br/><b><span id='meninggal' class="penajaibmeninggal"></span></b> MENINGGAL</p> <p class="penajaibupdate">Update Hari ini:<span id="date"></span></p> </div></div></div> <style> .penajaibcard-body {
 margin: 0;
 padding: 20px;
 position: relative;
}
.penajaibshadow {
 box-shadow:0 0px 60px #ccc;
}
.penajaiblogoindo {
 float: right;
 position: relative;
 top: 5px;
}
.penajaiborange {
   box-shadow:0 0px 3px #ccc;
    border-radius:7.5px;
 background: url(https://i.ibb.co/cTGXPB0/IMG-20200326-204922.jpg) calc(100%);
 color: #fff !important;
}
.penajaibcountry {
 font-size: 30px;
 margin: 0px !important
}
.penajaibcorona {
 padding: 5px 0px;
 margin: 0px !important;
 line-height: 30px
}
.penajaibupdate {
 font-size: 20px;
 margin: 0px !important
}
.penajaibpositif {
border-radius:3px;
 padding: 5px 7px 5px 5px;
 background: #f82649!important;
}
.penajaibsembuh {
border-radius:3px;
 padding: 5px 7px 5px 5px;
 background: #09ad95!important;
}
.penajaibmeninggal {
border-radius:3px;
 padding: 5px 7px 5px 5px;
 background: #d43f8d !important;
}
.susahtidurzzz{-webkit-animation:fadeIn 1s infinite normal;animation:fadeIn 1s infinite normal}@-webkit-keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeIn{from{opacity:0}to{opacity:1}}
</style>

Cara Pemasangan
1. Buka dashboard blogger sobat

2. Masuk tab Tata letak, Kemudian silahkan terserah sobat mau diletakkan dimana kalau disaya di Widget Side-bar ya.

3. Tambahkan Widget > HTML/JavaScript, lalu masukan kode widget Corona diatas ke kolom HTML yang tersedia.

4. Lalu  Save 

Widget Data Corona atau Covid-19 Indonesia sudah terpasang di blog sobat. Semoga pandemi Corona ini cepat selesai aamiin. Stay Safe, Stay at home. Sekian dan Terimakasih.


"Membuat widget data Corona Indonesia secara real-time di blog"
Tampilkan Komentar
Sembunyikan Komentar

Belum ada Komentar untuk "Membuat widget data Corona Indonesia secara real-time di blog"

Posting Komentar

Jangan malu bertanya!

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel