بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
Corona Virus Desease / Virus Corona / Covid19 adalah virus baru yang menghantui kehidupan kita sehari-hari belakangan ini. Dan dampaknya tidak sedikit yang mengakibatkan meninggal dunia.
Guna mengingatkan kita akan bahaya virus varian baru ini, setidaknya kita mencegah dengan melaksanakan 5 M : Mencuci tangan, Memakai masker, Menjaga jarak, Menjauhi kerumunan dan Mengurangi mobilitas diluar rumah.
Baca Juga : Animasi Warna Gradasi atau Gradient pada Scrollbar Navigasi Atas Header
Begitu juga dengan kita sebagai blogger, memasang widget Pengingat Covid19 di area sidebar blog kita. Gunanya untuk mengetahui perkembangan dan data terbaru dari jenis varian virus yang terkenal cepat penyebarannya ini.
Kedepannya dengan informasi yang kita dapat, setidaknya kita dapat berusaha mencegah dengan mengerti info-info terbaru dari kasus yang bergejolak di tengah-tengah kehidupan masyarakat kita sekarang ini.
Baca Juga : Membuat Efek Sudut Melengkung atau Border Radius dengan CSS
Pandemi, kita menyebutnya demikian. Sudah menjalar dan menjadi-jadi. Berusaha sehat di tengah kehidupan yang sakit memanglah tidak semudah membalik telapak tangan. Tapi kita tetap berusaha.
Okelah sekarang kita mulai saja mempraktekkan supaya widget bisa terpasang dengan baik di blog kita.
Caranya adalah kita hanya menempelkan tiga kode berikut HTML, CSS dan Javascript :
Menampilkan Widget Covid19 di Sidebar
HTML
Tempelkan kode dibawah ini di Tata Letak, kemudian pilih Tambah HTML/Javascript dan taruh kode di konten kosong disitu. Kodenya dibawah ini.<div class="vireorange img-card">
<div class="virecard-body">
<div class="d-flex">
<div class="virelogoindo"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2YOi-GD7-HyDnb3zwihPNnNu4rU4HEfjAK7X4Glq3jL5FT2LRJatPbxp7aJF7pgcDtllzMVareGgQzDIfuG95MWxldVc7Y9YMFLXmorWWcJ84q5ZBPCIxKEHIcuUKcEhH0xOI4eMJjLec/" width="36" height="36" alt="Indonesia" title="Indonesia"/> </div>
<p class="vireupdate">Update Hari Ini: <span id="date"/></span></p>
<p class="virecountry">Data Pantauan COVID-19 Indonesia</p>
<p class="virecorona"> <span id="terjangkit" class="virepositif"/></span>Positif <span id="sembuh" class="viresembuh"/></span>Sembuh <span id="meninggal" class="viremeninggal"/></span>Meninggal</p>
</div></div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 24 150 28" preserveaspectratio="none">
<defs>
<path id="gentle-wave" d="M-160 44c30 0 58-18 68-18s 58 18 88 18 58-18 98-5 58 18 88 18 v44h-352z" />
</path></defs>
<g>
<use xlink:href="#gentle-wave" x="55" y="0" fill="rgba(34,49,63,0.03)"/>
<use xlink:href="#gentle-wave" x="48" y="2" fill="rgba(34,49,63,0.03)"/>
<use xlink:href="#gentle-wave" x="50" y="4" fill="rgba(34,49,63,0.03)"/>
</use></use></use></g>
</svg>
</div>CSS
Tempelkan kode dibawah ini di Tema, kemudian pilih Sesuaikan : Edit HTML dan taruh kode dibawah ini persis diatas kode ]]></b:skin>. Kodenya dibawah ini ya.virecard-body{margin:12px 12px 12px 12px;padding:12px 12px 12px 12px;font-weight:500;position:relative;z-index:1}
.virelogoindo{float:right;position:relative;top:0;border-radius:50px;overflow:hidden}
.vireorange{position:relative;background:#f8f8f8;color:#535353;border-radius:10px}
.vireorange svg{position:absolute;bottom:0;left:0;right:0}
.virecountry{font-size:18px;font-weight:500;margin:0}
.virecorona{padding:10px 0 0 0;margin:0;font-size:12px;line-height:30px;overflow:auto}
.vireupdate{font-size:12px;margin:0 auto 10px auto}
.virepositif,.viresembuh,.viremeninggal{padding:13px 10px;color:#fff;border-radius:99em;margin:7px 7px 7px 7px}
.virepositif{background:#f39c12}.viresembuh{background:#54a0ff}.viremeninggal{background:#ee5253}
.virewords{padding:5px 7px 5px 5px;background:#333333;border-radius:10px;align:center}Javascript
Tempelkan kode dibawah ini di Tema, kemudian pilih Sesuaikan : Edit HTML dan taruh kode dibawah ini persis diatas kode </body>. Kodenya dibawah ini<script>
//<![CDATA[
$(document).ready(function(){var t=new Date;$("#date").html(t.getDate()+"/"+(t.getMonth()+1)+"/"+t.getFullYear()),$.ajax({url:"https://api.kawalcorona.com/indonesia/",success:function(t){$("#terjangkit").html(t[0].positif),$("#sembuh").html(t[0].sembuh),$("#meninggal").html(t[0].meninggal)}})});
//]]>
</script>Setelah itu semua dilakukan sekarang saatnya kalian Save dan Publikasikan blog kalian. Lihat pasti sudah jadi dan ada widget Covid19nya. Sekian dan terima kasih yang sudah mau mampir untuk membaca artikel Menampilkan Widget Covid19 di Sidebar. Salam blogger, semangat ya ngeblognya. Wassalam.
Label Postingan :
Tips Blog
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Menampilkan Widget Covid19 di Sidebar . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
