Cara Memasang Widget Informasi Pasien Corona di Blog

Blog Makmurriansyah

Selamat datang di Blog Makmurriansyah, pada hari ini saya akan membagikan sebuah tutorial yang berkaitan dengan blog dan kali ini saya akan membagikan bagaimana cara memasang widget informasi pasien covid-19 di blog, yang mana virus ini sudah mewabah di seluruh negera.

Oleh karena itu pemerintah pusat juga telah merilis website untuk masyarakat yang ingin memantau jumlah pasien virus corona (covid-19) ini dan dengan memanfaatkan API (Application Programming Interface) pada website kawalcorona.com , data jumlah pasien covid-19 bisa diambil dan dibuat (Coding) sedemikian rupa agar bisa di tampilkan ke dalam blog dan perlu diketahui juga kalau informasi tersebut akan selalu update otomatis yang bersumber dari Kementrian Kesehatan & JHU..

Berikut ini website resmi informasi untuk memantau perkembangan Virus Corona ( COVID-19) di indonesia.
Nah kalau begitu langsung saja ke inti postingan kali ini, berikut ini adalah cara memasang widget informasi pasien corona di indonesia dan disini saya akan membagikan 2 tampilan informasinya yang bisa kamu pilih dan letakan di blog kamu, dibawah ini adalah langkah-langkahnya.

Tampilan Pertama
  1. Buka Blogger, kemudian salin kode yang ada dibawah ini

    <!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>

  2. Kemudian buka menu Dashboard Tata Letak > Tambah Gadget > HTML/Javascript > Simpan
  3. Jika kamu ingin membuat halaman khusus untuk informasinya kamu bisa masuk ke Dashboard Halaman > Halaman Baru > Kemudian pilih mode HTML > Simpan
Selesai, maka akan tampil seperti gambar dibawah ini.

Blog Makmurriansyah
Tampilan Kedua

  1. Buka Blogger, kemudian salin kode yang ada dibawah ini

    <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="kuraorange kurashadow">
    <div class="kuracard-body img-card">
    <div class="d-flex">
    <div class="kuralogoindo"> <img src="https://kawalcorona.com/uploads/indonesia-PZq.png" width="50" height="50" alt="Positif"> </div>
    <p class="kuracountry">COVID-19 INDONESIA</p>
    <p class="kuracorona"><b> <span id='terjangkit' class="kurapositif"></span></b> POSITIF, <b><span id='sembuh' class="kurasembuh"></span></b> SEMBUH, <br/><b><span id='meninggal' class="kurameninggal"></span></b> MENINGGAL</p>
    <p class="kuraupdate">Update Hari ini: <span id="date"></p>
    </div></div></div>
    <style>
    .kuracard-body {margin: 0;padding: 20px;position: relative;}
    .kurashadow{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}
    .kuralogoindo {float: right;position: relative;top: 5px;}
    .kuraorange {background: #FF7E00;color: #fff !important;}
    .kuracountry{font-size:30px;margin:0px !important}
    .kuracorona{padding:5px 0px;margin:0px !important;line-height:30px}
    .kuraupdate{font-size:20px;margin:0px !important}
    .kurapositif{padding:5px 7px 5px 5px;background: #f82649!important;}
    .kurasembuh{padding:5px 7px 5px 5px;background: #09ad95!important;}
    .kurameninggal{padding:5px 7px 5px 5px;background: #d43f8d !important;}
    </style>
  2. Kemudian buka menu Dashboard Tata Letak > Tambah Gadget > HTML/Javascript > Simpan
  3. Jika kamu ingin membuat halaman khusus untuk informasinya kamu bisa masuk ke Dashboard Halaman > Halaman Baru > Kemudian pilih mode HTML > Simpan
Selesai, maka tampilannya akan terlihat seperti gambar dibawah ini jika dipasang pada bagian sidebar navigation blog

Blog Makmurriasyah

Saya rasa cukup tutorial kali ini mengenai cara memasang widget covid-19 di blog, jika ada kesalahan dalam kode diatas kamu dapat komen dibawah semoga apa yang saya bagikan disini bermanfaat untuk kita semua.

Terimakasih.

0 Response to "Cara Memasang Widget Informasi Pasien Corona di Blog"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel