Cara Memasang Widget Statistik Virus Corona (COVID 19) di Blogger

  • Whatsapp

Virus Corona adalah sebuah virus yang mematikan yang menyerang tubuh manusia. Akibat virus ini banyak orang yang meninggal dunia, di Indonesia sendiri sekarang yang positif terkena virus Corona pada 12 Juli 2020 08:56:19 WIB ini menurut situs kawalcorona sudah 74,018 positif, 34,719 sembuh, dan 3,535 meninggal.

Pada artikel kali ini disini tidak membahas lebih dalam apa itu virus corona, tetapi akan memberikan tutorial yaitu cara memasang widget update virus corona di Indonesia.

Widget ini datanya diambil dari situs kawalcorona.com yaitu dari API website tersebut. Dengan widget ini juga bila ada orang yang berkunjung di blog kita akan lebih mengetahui informasi terbaru tentang virus tersebut mulai dari yang sembuh, Meninggal dan OTD (Orang dalam Pengawasan).

Pengaruh terhadap loading blog

Apa tidak berat bila di pasang widget ini ?

Tidak juga, widget ini sudah sedikit di modifikasi yaitu dengan menambahkan kode ‘Lazyload’ agar tidak memberatkan blog saat di akses.

Dengan memasang widget update Virus Corona atau Covid 19 ini para blogger juga Ikut serta memberikan informasi kepada masyarakat tentang update virus tersebut. Bagaimana cara memasang di Blogger ikuti aja langkah – langkahnya berikut ini :

Cara pasang widget corona

Cara Memasang Widget Statistik Virus Corona (COVID 19) di Blogger.

Langkah pertama kalian harus masuk dulu ke Akun Blogger, pilih Tata Letak

Setelah itu pilih Tambah Widget baru pilih HTML/Javascript.

Kemudian Copy Kode di bawah ini

Kode widget corona

Ada 2 tampilan widget corona dengan menggunakan kode yang berbeda, berikut adalah kode yang bisa digunakan dengan tampilan disesuaikan dengan pilihan masing-masing.

Tampilan 1

<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="jagoorange jagoshadow img-card">
<div class="jagocard-body">
<div class="d-flex">
<div class="jagologoindo">
<img alt="Positif" height="50" src="https://kawalcorona.com/uploads/indonesia-PZq.png" width="50" /> </div>
<div class="jagocountry">
COVID-19 INDONESIA</div>
<div class="jagocorona">
<b> <span class="jagopositif" id="terjangkit"></span></b> POSITIF, <b><span class="jagosembuh" id="sembuh"></span></b> SEMBUH,
<b><span class="jagomeninggal" id="meninggal"></span></b> MENINGGAL</div>
<div class="jagoupdate">
Update Hari ini: <span id="date"></span></div>
</div>
</div>
</div>
<style> .jagocard-body {margin: 0;padding: 20px;position: relative;} .jagoshadow{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} .jagologoindo {float: right;position: relative;top: 5px;} .jagoorange {background: #1589E3;color: #fff !important;} .jagocountry{font-size:30px;margin:0px !important} .jagocorona{padding:5px 0px;margin:0px !important;line-height:30px} .jagoupdate{font-size:20px;margin:0px !important} .jagopositif{padding:5px 7px 5px 5px;background: #f82649!important;} .jagosembuh{padding:5px 7px 5px 5px;background: #09ad95!important;} .jagomeninggal{padding:5px 7px 5px 5px;background: #d43f8d !important;} </style>

Sourse code : Tips Bermakna

Tampilan 2

<div id="kopi-covid"></div>
<script>
  var f = document.createElement("iframe");
  f.src = "https://kopi.dev/widget-covid-19/";
  f.width = "100%";
  f.height = 380;
  f.scrolling = "no";
  f.frameBorder = 0;
  var rootEl = document.getElementById("kopi-covid");
  console.log(rootEl);
  rootEl.appendChild(f);
</script>

Sourse code : Kopidev

Klik Simpan.

Nah itulah sedikit tutorial kali ini, semoga semua segera berakhir. Dan semua bisa beraktifitas seperti dulu kala, Aminnnn.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *