Cara Memasang Widget Statistik Virus Corona (COVID19) Pada Blog Keren - BombayTrik

 

Haloo sobat blogger semuanya, kali ini saya akan membagikan tutorial yaitu bagaimana cara menambahkan widget statistik virus corona Indonesia pada blog.

Untuk membuat widget covid asangatlah mudah dan gampang temen-temen. Kalian cukup buka halaman Blogger > Tata Letak > klik Tambahkan Widget HTML.

Tetapi kalian harus mempunyai Script statistiknya yang akan saya bagikan pada artikel ini. Ada dua Macam model statistiknya dan sudah responsive di semua untuk versi web dan mobile.

Also Read: Cara Redirect Postingan blog Ke blog Lain

Cara Pasang Widget Statistik Virus Corona / Covid-19 

Script Widget Statistik Virus Corona 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>

Script Widget Statistik Virus Corona 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>

Cara Memasang Widget Covid di Blog

1. Silahkan Login Dulu ke Blogger.com

2. Pilih menu Tata Letak > Tambahkan Gadget > HTML/JavaScript

3. Pastekan kode Diatas.

4. Klik Simpan dan jangan lupa lihat hasilnya.

   DEMO

Nah, gimana hasilnya, bagus? Pemasangan widget statistik Covid-19 ID bisa kalian pasang di postingan blog kalian dengan cara masuk ke menu compose.

Notes:
Ketika saya sudah memasang widget statistik diatas, saya menemukan kendala, dimana link yang ada pada blog saya sebagian tidak bisa di klik, karena mungkin tertutup dengan kode script tersebut. Tetapi bagi kalian yang tidak mengalami kendala apa-apa, harap dikomentarin ya.

Tetapi pada script kedua itu aman-aman aja, saya sarankan kepada kalian coba pasang widget covid yang kedua aja karena desain yang bagus simpel dan selalu update

Also Read: Cara buat Link Aktif di Komentar Blog Prang Lain

Sekian dari saya mengenai cara membuat widget statistik virus corona indonesia semoga bermanfaat bagi teman-teman blogger sekalian.

Tags:
widget covid blog, cara pasang widget corona pada blog/website.