Yadi Blogging Pemula yang Masih Belajar Menulis Banyak Cerita dan Pengalaman di Dunia Internet Saya juga Mengelola Website AKUNADS.COM Untuk Jasa Pembuatan Website.

6 Widget Setatus Virus Corona dan Cara Memasang di Blogger

5 min read

6 Widget Setatus Virus Corona dan Cara memasang di Blogger

Virus corona menjadi suatu penyakit yang cepat menular maka dari itu harus menjaga kesehatan dan mengikuti anjuran pemerintah. Anda seorang blogger tidak salahnya memasang widget setatus corona agar setiap pengunjung blog anda mengtahui perkembangan virus corona yang ada di Indonesia. Berbagi informasi untuk kebaikan bersama :).

Seperti pembahasan judul di atas berikut 6 widget setatus corona yang bisa anda pasang di blogger, otomatis update setatistis corona yang di ambil dari sumber kementri kesehatan dan JHU. Data yang di publikasikan berupa data total positif, total sembuh dan total meninggal.

Tampilan dari widget responsive menyesuikan pengguna mobile, ukuran load widget tidak terlalu berat, sehingga tidak mempengaruhi  kecepatan akses blog anda.

Cara memasang Widget setatus Virus Corona di Blogger

  1. Silahkan anda login ke blogger.com
  2. Lalu memili menu Tata Letak klik + Add a Gadget  HTML/Javascript
  3. Langkah terakhir copy dan paste widget tersebut, simpan.

6 Widget setatus Virus Corona

Setelah anda mengtahui cara memasang widget di blogger, berikut daftar widget yang bisa anda pilih untuk pasang di blogger.

1. Widget Statistik Corona Versi 1

<style> .datax #show { width: 31%; float: left; text-align: center; } .positif, .sembuh, .meninggal { margin: 1%; border-radius: 5px; box-shadow: 0 1px 2px 2px rgba(0,0,0,.5); text-overflow: ellipsis; overflow: hidden; color: white; font-family: cursive; } .datax .positif { background: #f5a61f; } .datax .sembuh { background: #24c624; } .datax .meninggal { background: #ed2828; } #show .angka { font-size: 2em; font-weight: 700; } #show .detail { background: white; width: 100%; display: block; color: black; box-shadow: 0px -2px 4px 1px #66c7ff; } .datax .title { text-align: center; text-transform: uppercase; font-family: monospace; font-size:1em; } </style> <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=”datax”> <div class=”title”> <h1>Update kasus covid-19 indonesia : <span id=”date”>24 Maret 2020</span></h1> </div> <div id=”show” class=”positif”> <div id=”positif” class=”angka”>686</div> <span class=”detail”>Positif</span> </div> <div id=”show” class=”sembuh”> <div id=”sembuh” class=”angka”>30</div> <span class=”detail”>Sembuh</span> </div> <div id=”show” class=”meninggal”> <div id=”meninggal” class=”angka”>55</div> <span class=”detail”>Meninggal</span> </div> </div>
10 widget setatus corona dan cara memasang di blogger
2. Widget Statistik Corona Versi 2
<iframe src="https://covid19.ilmucoding.com/widget" width="100%" scrolling="no" height="250px" style="border:none;"></iframe>

widget setatus corona dan cara memasang di blogger

3. Widget Statistik Corona Versi 3

<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>
widget setatus corona dan cara memasang di blogger
4. Widget Statistik Corona Versi 4

<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=”bisablog-card”>
<div class=”bisablog-info”><h2>DATA COVID-19 INDONESIA</h2></div>
<p class=”bisablog-positif”>&#128567 Positif: <span id=”terjangkit”></span></p>
<p class=”bisablog-sembuh”>&#128522 Sembuh: <span id=”sembuh”></span></p>
<p class=”bisablog-meninggal”>&#128557 Meninggal: <span id=”meninggal”></span></p>
<div class=”bisablog-info”><span><em>(Data: kawalcorona.com)</em></span></div>
</div>

<style>
.bisablog-card {padding: 5%; border:1px solid #eaeaea; background:#f4f4f4;border-radius:10px}
.bisablog-card p {color:#fff}
.bisablog-positif {background:#e53935}
.bisablog-sembuh {background:#43a047}
.bisablog-meninggal {padding:10px 7px; background:#546e7a}
.bisablog-positif, .bisablog-sembuh {padding:10px 7px; margin-bottom:1em}
.bisablog-info {text-align:center}
.bisablog-card p{font-weight:bold}
</style>

widget setatus corona dan cara memasang di blogger

5. Widget Statistik Corona Versi 5

<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=”bisablog-card”>
<div class=”bisablog-info”><h2>INDONESIA</h2></div>
<div class=”bisablog-flex”>
<div>
<p><span id=”terjangkit”></span></p>
<p>Positif</p>
</div>
<div class=”flex-middle”>
<p><span id=”meninggal”></span></p>
<p>Meninggal</p>
</div>
<div>
<p><span id=”sembuh”></span></p>
<p>Sembuh</p>
</div>
</div>
<div class=”bisablog-info”><span><em>(Data: kawalcorona.com)</em></span></div>
</div>

<style>
.bisablog-card {padding:5%;border:1px solid #929292}
.bisablog-info {text-align:center;}
.bisablog-flex {display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap;}
.bisablog-flex p {font-weight: bold;text-align: center;}
.bisablog-flex span {color: #e53935}
.flex-middle {border-left:2px solid #eaeaea;border-right:2px solid #eaeaea;padding:0 1em}
</style>

widget setatus corona dan cara memasang di blogger

6. Widget Statistik Corona Versi 6

<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=”bisablog-card”>
<h2>DATA COVID-19 INDONESIA</h2>
<p>Positif: <span id=”terjangkit”></span>
<br />Sembuh: <span id=”sembuh”></span>
<br />Meninggal: <span id=”meninggal”></span>&nbsp;
</p>
<span><em>(Data: kawalcorona.com)</em></span>
</div>

<style>
.bisablog-card {padding:1.5em; background: linear-gradient(45deg, #42a5f5, #2196f3)}
.bisablog-card h2, .bisablog-card p, .bisablog-card span {color:#fff}
.bisablog-card h2 {border-bottom:2px solid #fff}
.bisablog-card p {font-weight:bold}
</style>

widget setatus corona dan cara memasang di blogger

Pilih dari 6 widget statistik corona di atas, mana yang cocok untuk blog anda. Silahkan untuk mencoba semoga bermanfaat dan kita semua di lindungi dari penyakit virus corono, amin.

 

Avatar
Yadi Blogging Pemula yang Masih Belajar Menulis Banyak Cerita dan Pengalaman di Dunia Internet Saya juga Mengelola Website AKUNADS.COM Untuk Jasa Pembuatan Website.

Cara cek data Mahasiswa

Avatar Yadi
1 min read

Cara Hapus Aplikasi di Laptop

Avatar Yadi
1 min read

Tinggalkan Balasan

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