KURAZONE ~ Halo sahabat Kurazer, pada kesempatan yang lalu saya sudah berbagi informasi mengenai Cara Memasang Widget Statistik Coronavirus / COVID-19 Indonesia di Blog #Style 1. Kali ini saya bagian versi atau model lainnya, untuk kode Javascript yang dipakai masih menggunakan API atau data dari situs https://kawalcorona.com. Sedangkan untuk kode HTML dan CSS nya memiliki tampilan yang berbeda.
Berikut adalah Cara Memasang Widget Statistik Coronavirus / COVID-19 Indonesia di Blog #Style 2
1. Buka akun Blogger kalian
2. Masuk ke Tata Letak
3. Buatlah Widget Baru pada bagian Sidebar Blog
4. Pilih HTML/Javascript
5. Copy dan Paste kode dibawah ini kedalam widget baru tersebut, kemudian SIMPAN
<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="kurakotakz">
<div class="kuraupdate">🦠 Data COVID-19 INDONESIA 🦠<br/>Update Hari ini: <span id="date"></div>
<div class="kurapositifz">
<div class="kuraimgz"><img src="https://kawalcorona.com/uploads/sad-u6e.png" width="50%"/></div>
<div class="kurastatusz"><br/><b>POSITIF</b></div>
<div class="kuraorangz"><b><span id='terjangkit'></span></b><br/>ORANG</div>
</div>
<div class="kurasembuhz">
<div class="kuraimgz"><img src="https://kawalcorona.com/uploads/happy-ipM.png" width="50%"/></div>
<div class="kurastatusz"><br/><b>SEMBUH</b></div>
<div class="kuraorangz"><b><span id='sembuh'></span></b><br/>ORANG</div>
</div>
<div class="kurameninggalz">
<div class="kuraimgz"><img src="https://kawalcorona.com/uploads/emoji-LWx.png" width="50%"/></div>
<div class="kurastatusz"><br/><b>MENINGGAL</b></div>
<div class="kuraorangz"><b><span id='meninggal'></span></b><br/>ORANG</div>
</div></div>
<style>
.kurakotakz{width:100%;}
.kuraimgz{float:left;width:30%;}
.kurastatusz{float:left;width:33%;line-height: 14px;margin-left: -30px;font-size:15px;}
.kuraorangz{float:right;width:30%;text-align:center;background:#fff;padding:5px;position:relative;right:-2px;top:-3px;border-radius:5px;}
.kuraupdate{font-size:15px;margin:0px !important;background:#123;color:#fff;text-align:center;padding:5px}
.kurapositifz{padding:10px;background:#f82649;height:40px}
.kurasembuhz{padding:10px;background:#09ad95;height:40px}
.kurameninggalz{padding:10px;background:#d43f8d;height:40px}
</style>Darisini kalian sudah berhasil memasang Widget Statistik Coronavirus / COVID-19 Indonesia di Blog. Jika kalian sudah paham mengenai HTML dan CSS nya, kalian bisa mengeditnya sendiri sesuai selera kalian (warna, lebar, tinggi, jarak, ukuran font dan sebagainya)
Itulah informasi mengenai "Cara Memasang Widget Statistik Coronavirus / COVID-19 Indonesia di Blog #Bagian 2", selamat mencoba dan semoga bermanfaat. Goodluck!