Cara Memasang Widget Statistik Coronavirus / COVID-19 Indonesia di Blog #Style 2

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!


Post a Comment

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Lebih baru Lebih lama