Cara Menambahkan Widget Info Covid-19 di Blogger
Snippet Tips Blogger Widget
Apa Itu Coronavirus Disease 2019 (Covid-19)?
Coronavirus Disease 2019 atau disingkat menjadi Covid-19 adalah virus yang berasal dari Wuhan sebuah kota di Provinsi Hubei Cina, yang kemudian menyebar ke berbagai Negara.
Dan virus tersebut menyebabkan syndrome coronavirus 2 (SARS-CoV-2) atau gangguan pernapasan akut yang sangat parah bahkan orang yang positif terkena virus Corona ini bisa meninggal dunia. Dan yang mengerikannya virus Corona ini sudah banyak menyebar di Indonesia.
Oleh sebab itu kita bisa mengetahui perkembangan virus Corona tersebut di Indonesia, salah satu caranya adalah dengan menggunakan API Covid-19 Dari Kawalcorona Terbaru. Jadi dengan API tersebut kita bisa membuat sebuah aplikasi atau program yang real time tentang perkembangan Covid-19 di Indonesia. Di sini Anda bisa menambahkan sebuah widget dari perkembangan Informasi Covid-19 khusus negara Indonesia menggunakan API dari kawalcorona.com di blog Anda.
Apa Itu Kawalcorona?
Kawalcorona adalah sebuah website yang memberikan berbagai informasi mengenai perkembangan Virus Corona baik itu di Indonesia maupun di Dunia.
Dan kawalcorona juga memberikan API-nya untuk developer website untuk di pergunakan membagikan informasi tentang perkembangan Virus Corona.
Cara Menambahkan Widget Info Covid-19 di Blogger
Buka dasbor Blogger Anda, klik menu Tata Letak dan tambahkan kode di bawah ini di dalam widget kosong atau widget baru.
<script>
$(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>
<div class="vireorange img-card">
<div class="virecard-body">
<div class="d-flex">
<div class="virelogoindo"> <img src="https://3.bp.blogspot.com/-5x3v-pc9u2o/XoBetcn49BI/AAAAAAAAB8A/_w0cwuniPdIMgMPrymQ8i0BGQ-KpkLlTQCLcBGAsYHQ/s36/indonesia-flagg.png" width="36" height="24" alt="Positif" /> </div>
<p class="vireupdate">Update Hari ini: <span id="date"/></span></p>
<p class="virecountry">Info COVID-19</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>
<style>
.virecard-body{margin:0;padding:20px;font-weight:500;position:relative;z-index:1}
.virelogoindo{float:right;position:relative;top:0;border-radius:5px;box-shadow:0 1px 3px rgba(0,0,0,0.05);overflow:hidden}
.vireorange{position:relative;background:#f6f7fa;color:#000;margin:0 auto 20px auto;border-radius:10px}
.vireorange svg{position:absolute;bottom:0;left:0;right:0}
.virecountry{font-size:26px;font-weight:500;margin:0}
.virecorona{padding:10px 0 0 0;margin:0;font-size:14px;line-height:30px}
.vireupdate{font-size:14px;margin:0 auto 10px auto}
.virepositif,.viresembuh,.viremeninggal{padding:3px 10px;color:#fff;border-radius:99em;margin:0 7px 0 0}
.virepositif{background:#f39c12}.viresembuh{background:#54a0ff}.viremeninggal{background:#ee5253}
.virewords{padding:5px 7px 5px 5px;background:#333333;border-radius:10px;align:center}
</style>
Maka hasilnya akan seperti ini
See the Pen
Info Covid-19 Light by Namina Kiky (@NaminaKiky)
on CodePen.
Sekian dari Namina tentang Cara Menambahkan Widget Info Covid-19 di Blogger. Semoga wabah ini cepat berlalu dan kembali normal sebagaimana biasanya. Terima kasih sudah berkunjung dan semoga bermanfaat.