Cách thêm tiện ích thông tin Covid-19 trên Blogger

Cách thêm tiện ích thông tin Covid-19 trên Blogger: Đây là một trong những cách sử dụng API Covid-19 từ Kw mới nhất, sới API này, chúng tôi có thể tạo ra một ứng dụng hoặc chương trình thời gian về sự lây lan và phát triển của Covid-19 tại các quốc gia khác nhau. 

Bệnh coronavirus 2019 (Covid-19) là gì?

Covid-19 là một loại virus có nguồn gốc từ Vũ Hán, một thành phố thuộc tỉnh Hồ Bắc của Trung Quốc, sau đó lan sang nhiều quốc gia khác nhau. Và virus gây ra hội chứng coronavirus 2 (SARS-CoV-2) hoặc rối loạn hô hấp cấp tính rất nghiêm trọng, thậm chí những người dương tính bị ảnh hưởng bởi virus Corona có thể tử vong. Tình hình trên thế giới vẫn còn rất nhiều quốc gia phải đang đối mặt với dịch bệnh này.

Cách thêm tiện ích thông tin Covid-19 trên Blogger

Mở bảng điều khiển Blogger của bạn, nhấp vào menu Bố cục và thêm mã bên dưới vào một tiện ích trống hoặc mới.

<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQSidJH2cMNR8TLEaT0CnWVhZhyphenhyphenT6og7LFyeTeVvLrh17xyUA8jjBIY5TDwbWsUgTyx8hVyIkZ5ygIkuVBYblt_owUBHVEFjvTHcuVRXNcwdfRgh-ans2cH0H4pPvKBJtMzQZWoLX75hqY/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&nbsp;&nbsp;&nbsp;&nbsp;<span id="sembuh" class="viresembuh"/></span>Sembuh&nbsp;&nbsp;&nbsp;&nbsp;<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>

Dữ liệu của API được sử dụng tại quốc gia Indo nên bạn có thể thay đổi tùy vào nơi bạn sinh sống! đây là một trong những ứng dụng get api vào trong blogger mà chúng ta thường thấy được xây dựng trên các website khác!

Và nó sẽ như thế này:

Thêm tiện ích ta chọn phần HTML 

Chúc bạn thành công!