Cara Membuat Widget Corona Update Terbaru Otomatis di Blogger dengan API Kawalcorona

---

slot iklan

---

Mau membuat widget data terbaru corona di Indonesia buat di pasang di blog/blogger? Bagaimana cara membuat widget corona terupdate secara otomatis di blogger/blog? Ikuti panduan mudah berikut ini.

Sub Menu Utama

1. Widget corona update otomatis di blogger?
2. Widget corona update valid hari ini?
3. Widget blog corona valid amp?
4. Widget blog corona gratis?
5. Tutorial pasang widget corona di blog

Widget corona update otomatis di blogger?

Iya, karena menggunakan api dari source https://api.kawalcorona.com/indonesia. Anda tidak perlu edit-edit html lagi. Anda hanya perlu memastikan jumlah yang tayang sesuai dengan situs aslinya demi menghindari disinformasi yang bisa berakibat fatal.

Widget corona update valid hari ini

Iya. Biasanya data terbaru jumlah positif corona di Indonesia update setiap hari mulai pukul 15.00 WIB atau setelah diumumkan secara resmi oleh juru bicara penanggulangan Covid-19 dari pemerintah, yaitu Bapak Ahmad Yurianto.

Widget blog corona valid amp?

Karena menggunakan javascript, maka tutorial cara membuat widget corona update terbaru otomatis di blogger ini belum bisa untuk template blog AMP. Tutorial widget lifetime corona ini sementara hanya untuk template blog non-AMP.

Widget blog corona gratis?

Iya, free. Widget blog corona ini gratis dari situs kawalcorona dengan api https://api.kawalcorona.com/indonesia.

Tutorial pasang widget corona di blog

Langsung saja saya anggap Anda sudah berada di menu edit html, lalu :

h1, h2, p{margin:0;}
  .title{text-align:center;}
.keterangan{font-size:90%;text-align:left;color:#ffffff;}
  .data {margin-top: 10px;display:flex;}
  .data .positif, .data .sembuh, .data .meninggal{width:30%;padding:10px;}
  .data .sembuh{margin: 0 10px;}
  .data .positif {background: #f82649!important;display: flex;box-shadow:0 5px 10px rgba(167, 66, 153, 0.3);}
  .data .sembuh {background: #09ad95!important;display: flex;box-shadow:0 5px 10px rgba(167, 66, 153, 0.3);}
  .data .meninggal {background: #d43f8d !important;display: flex;box-shadow:0 5px 10px rgba(167, 66, 153, 0.3);}
  .emoji img{width: 50px;}
  .emoji{margin-left: auto !important}
  .angka{font-weight:600 !important;font-size:200%;}
  @media (max-width: 576px)
  {
   .keterangan{font-size:75%;}
   .data .sembuh{margin: 0 5px;
  }

Untuk mempermudah pencarian di html gunakan ctrl + f. Selanjutnya langkah kedua tinggal :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <script>
  $(document).ready(function(){
   var d = new Date();
   var month = new Array();
   month[0] = "JANUARI";
   month[1] = "FEBRUARI";
   month[2] = "MARET";
   month[3] = "APRIL";
   month[4] = "MEI";
   month[5] = "JUNI";
   month[6] = "JULI";
   month[7] = "AGUSTUS";
   month[8] = "SEPTEMBER";
   month[9] = "OKTOBER";
   month[10] = "NOVEMBER";
   month[11] = "DESEMBER";
   $("#date").html(d.getDate() + " " + month[d.getMonth()] + " " + d.getFullYear());
   $.ajax({url: "https://api.kawalcorona.com/indonesia/", success: function(result){
    $("#positif").html(result[0].positif);
    $("#sembuh").html(result[0].sembuh);
    $("#meninggal").html(result[0].meninggal);
   }});
  });
 </script>

Simpan template. Selanjutnya masuk ke tata letak, pilih edit html. Kemudian copy dan paste kode berikut di tempat yang Anda mau :

<div class="title">
  <h1>COVID-19 ID</h1>
  <h2><span id="date"></span></h2>
 </div>
 <div class="data">
  <div class = "positif">
   <div class ="keterangan">
    <span>TOTAL POSITIF</span>
    <div id="positif" class="angka"></div>
    <span>ORANG</span>
   </div>
   <div class="emoji"><img src="https://kawalcorona.com/uploads/sad-u6e.png" alt="Positif"></div>
  </div>
  <div class = "sembuh">
   <div class ="keterangan">
    <span>TOTAL SEMBUH</span>
    <div id="sembuh" class="angka"></div>
    <span>ORANG</span>
   </div>
   <div class="emoji"><img src="https://kawalcorona.com/uploads/happy-ipM.png" alt="Sembuh"></div>
  </div>
  <div class = "meninggal">
   <div class ="keterangan">
    <span>TOTAL WAFAT</span>
    <div id="meninggal" class="angka"></div>
    <span>ORANG</span>
   </div>
   <div class="emoji">
    <img src="https://kawalcorona.com/uploads/emoji-LWx.png" alt="Meninggal"></div>
   </div>
  </div>

Maka hasilnya akan seperti ini :


Demikianlah tutorial cara membuat widget blog update corona di Indonesia untuk blogger. Source : https://www.hobingoding.com