Cara Membuat Widget Statistik COVID-19 di Blogger

Cara Membuat Widget Statistik COVID-19 di Blogger

Cara Membuat Widget Statistik COVID-19 di Blogger, seperti yang kita ketahui bahwa wabah virus corona ini telah menyebar hampir keseluruh penjuru dunia yang menyebabkan keresehan dimana-mana dan juga banyak menimbulkan masalah-masalah baru di dunia termasuk Indonesia.

Sebagai bentuk kepedulian dan untuk mengingatkan selalu para pembaca akan statistik wabah ini secara berkala, maka marilah kita saling pasang widget ini agar semua yang masih diberikan kesehatan selalu waspada, dan bisa menjalani hidup yang lebih bersih agar terhindar dari tertularnya virus ini.

Mengenal Widget


Widget ini merupakan suatu tampilan eksternal yang biasanya terletak pada bagian header, footer, maupun sidebar pada sebuah website. Widget memang lah termasuk sebuah komponen penting dalam suatu website, akan tetapi jika terlalu banyak memasang widget juga akan menimbulkan efek negatif seperti misalnya membuat proses pemuatan halaman blog menjadi lama.

Jadi bijaklah dalam memilih atau pasang dan hapus widget di website anda, gunakan jika diperlukan dan hapus jika memang sudah tidak digunakan.

Cara Membuat Widget Statistik COVID-19

Widget COVID-19 Untuk Blogger
  1. Langkah pertama yaitu silahkan masuk ke dashboard blogger anda.
  2. Kemudian pada menu blogger silahkan anda pilih Tata Letak.
  3. Pilih lokasi dimana anda ingin pasang, misal sidebar, footer, atau header.
  4. Lalu pilih Tambahkan Gadget kemudian pilih HTML / Javascript.
  5. Copy script dibawah ini, dan pastekan ke dalam kolom widget baru.
    <!doctype html>
    
    
     <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>
    
    
     <div class="title">
      </div>
     <div class="data">
      <div class = "positif">
       <div class ="keterangan">
        <span>POSITIF</span>
        <div id="positif" class="angka"></div>
        <span>JIWA</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>SEMBUH</span>
        <div id="sembuh" class="angka"></div>
        <span>JIWA</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>MENINGGAL</span>
        <div id="meninggal" class="angka"></div>
        <span>JIWA</span>
       </div>
       <div class="emoji">
        <img src="https://kawalcorona.com/uploads/emoji-LWx.png" alt="Meninggal" /></div>
       </div>
      </div></!doctype>
  6. Jangan lupa pilih Save / Simpan, jika telah copas script diatas.
  7. Selesai.
Bagaimana dengan penjelasan tutorial diatas? jika masih kurang paham dan ada yang perlu ditanyakan, silahkan tulis pertanyaan anda dikolom komentar, sebisa mungkin akan kami balas jika tidak ada kesibukan lain.


Sekian artikel dari Cara Membuat Widget Statistik COVID-19 di Blogger, silahkan bagikan artikel ini ke sosial media kalian jika dirasa bermanfaat.
Terima kasih

Fernand
Fernand Kecanduan berbagi ilmu!

Tidak ada komentar