Cara Menampilkan Data Sebaran Covid-19 di Blogger

Apamaunya.com - Berbicara tentang covid-19 atau virus corona tidak lepas dari namanya data sebaran virus corona "Api Corona" merupakan situs yang menyediakan data penyebaran virus corona. Dengan adanya api corona kamu bisa memanfaatkan api itu untuk memasang Widget Statistik Virus Corona pada  blog.

Dalam tutorial ini kita akan sama-sama belajar bagaimana cara menampilkan widget data penyebaran covid-19. Dengan memanfaatkan api yang disediakan beberapa situs.
Cara menampilkan data covid-19 di blogger

Cara Memasang Widget Covid-19 di Blogger
     1. Masuk Ke Tata Letak di Blogger
     2. Pilih Html/Javascript
     3. Copy Paste kode ini dan simpan
          - Atur Ukuran Width dan Height sesuai keinginan

     4. Data Indonesia Versi 1
<iframe align="left" frameborder="1" src="https://covid19.ilmucoding.com/widget"width="585" height="310" scrolling="auto"></iframe>
     
     5. Data Indonesia Versi 2
.post-body pre {
  background-color: #292E34; /* warna background */
  border-left: 5px solid #008c5f; /* variasi border kiri */
  padding:0; margin:.5em auto; white-space:pre; word-wrap:break-word; overflow:auto; position:relative; width:100%; -moz-tab-size:2; -o-tab-size:2; tab-size:2; word-break:normal; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text; -webkit-hyphens:none; -moz-hyphens:none; -ms-hyphens:none; hyphens:none
}
.post-body pre code {
  color: #BFBF90; /* warna huruf */
  font-size: 12px; /* ukuran huruf */ 
  max-height:250px; line-height:1.5em; display:block; background:none; border:none; padding:10px 15px; font-family:'source code pro',menlo,consolas,monaco,monospace; white-space:pre-wrap; overflow:auto; user-select:text; -webkit-user-select:text; -khtml-user-select:text; -moz-user-select:text; -ms-user-select:text; user-select:text
}


     6. Data Indonesia Versi 3
<!DOCTYPE html>
<html>
<head>
 <style>
  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;
  }
 </style>
 <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>
</head>
<body>
 <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>
</body>
</html>