Tutorial Pasang Widget Update Virus Covid-19 di Blog
Covid-19 Info Menarik Snippet Tips Tips Blogger Widget
Pada kesempatan kali ini saya akan sharing tentang cara pasang widget update virus corona di blog. Corona merupakan virus yang berasal dari Kekelawar. Virus ini pertama kali terjadi di kota Wuhan, China. Dalam bentang waktu yang begitu cepat, virus ini sudah menyebar di berbagai belahan dunia.
Menurut situs organisasi kesehatan dunia atau WHO, corona sudah ditetapkan sebagai pandemi. Seluruh dunia sedang dalam situasi gawat darurat. Oleh sebab itu sekecil apapun informasi tentang corona akan berharga bagi siapa saja.
Termasuk Anda, sebagai blogger.
Bagi Anda blogger Indonesia, informasi tentang corona akan memberikan dampak positif bagi pengunjung blog. Mereka akan mendapatkan informasi yang real time dan terus update setiap saat.
Salah satu cara menyampaikan informasi tersebut, selain dengan menulis artikel informatif, Anda juga bisa memasang widget update status virus corona secara real time di blog. Widget ini menggunakan API Covid-19 dari kawalcorona.com. Jadi dengan menggunakan API tersebut kita bisa membuat Widget di blog sobat yang real time tentang perkembangan Covid-19 di Indonesia.
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 agar di pergunakan membagikan informasi tentang perkembangan Virus Corona.
Cara Menambahkan Widget Info Covid-19 di Blogger
Step 1# Masuk ke Halaman Dashboard
Silahkan login ke akun blog Anda lalu buka Dasbor Blogger Anda.
Step #2 Klik Menu Tata Letak / Widget
Silahkan klik menu tata letak kemudian klik menu widget.
Step #3 Klik Tambahkan Gadget / Text HTML
Lalu Tambahkan Widget.
Step #4 Tambahkan Script
Pilih Widget HTML/Javascript, Lalu tambahkan kode di bawah ini di dalam widget kosong atau widget baru.
<style>
/*Blink*/
.blink_me {
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
color: red;
font-weight: bold;
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
.datax #show {
width: 46%;
float: left;
text-align: center;
}
.positif, .rawat, .sembuh, .meninggal {
margin: 2%;
border-radius: 10px;
box-shadow: 0 1px 2px 2px rgba(0,0,0,.5);
text-overflow: ellipsis;
overflow: hidden;
color: white;
font-size: 20px;
font-family: "Montserrat";
}
.datax .positif {
background: #dc3545;
}
.datax .rawat {
background: #fd7e14;
}
.datax .sembuh {
background: #28a745;
}
.datax .meninggal {
background: #6c757d;
}
#show .angka {
font-size: 30px;
font-weight: 700;
}
#show .detail {
background: white;
width: 100%;
display: block;
color: black;
box-shadow: 0px -2px 4px 1px #66c7ff;
}
.title {
text-align: center;
float:center;
font-family: "Montserrat;
font-size:18px;
}
.source {
text-align: center;
font-size:10px;
}
/* CSS button */
.button{
width:100%;
padding:0!important;
list-style:none;
margin:10px auto!important
}
.button li{
display:inline-block;
line-height:normal;
margin:0;
}
.button li a{
text-decoration: none;
position:relative;
display:inline-block;
padding:8px 20px;
margin:5px 4px;
color:#fff;
text-align:center;
font-weight:500;
border-radius:99em;
font-size:15px;
min-width:120px;
transition:all 0.2s cubic-bezier(0.4,0,0.2,1);
}
.button li a:first-letter{
text-transform:uppercase
}
.button li a.demo{
background:#f39c12;
color:#fff;
border:2px solid #f39c12
}
.button li a.download{
background:#5067c5;
color:#fff;
border:2px solid #5067c5
}
.button li a.download2{
background:#e74c3c;
color:#fff;
border:2px solid #e74c3c
}
.button li a.demo:hover,.button li a.download:hover,.button li a.demo:active,.button li a.download:active,.button li a.download2:hover,.button li a.download2:active{
box-shadow:0 2px 0.8rem -0.8rem rgba(0,0,0,0.8),0 0 0 1px rgba(0,0,0,0.05)
}
.button li a.demo:hover{
background:#fff;
color:#f39c12
}
.button li a.download:hover{
background:#fff;
color:#5067c5
}
.button li a.download2:hover{
background:#fff;
color:#e74c3c}
</style>
<div class="title">
<h3 style="margin:5px"><span class="blink_me">LIVE UPDATE</span><br />COVID-19 INDONESIA<br /><span id="metadataDate"></span> WIB</h3>
<div class="source">( Data: kawalcorona.com )</div>
<div>
<ul class="button">
<li><a class="download" href="https://jaydzgn.blogspot.com/2020/08/tutorial-pasang-widget-update-virus.html"
target="_blank" title="Pasang widget kawal corona"> <b>Pasang Widget</b> </a>
</li>
</ul>
</div>
</div>
<div class="datax">
<div id="show" class="positif">
<div id="confirmed" class="angka"></div>
<span class="detail">Positif</span>
</div>
<div id="show" class="rawat">
<div id="activeCare" class="angka"></div>
<span class="detail">Dirawat</span>
</div>
<div id="show" class="sembuh">
<div id="recovered" class="angka"></div>
<span class="detail">Sembuh</span>
</div>
<div id="show" class="meninggal">
<div id="deceased" class="angka"></div>
<span class="detail">Meninggal</span>
</div>
</div>
<script>const monthNames = [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember",
];
function numberWithCommas(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
const getData = async function () {
let doFetch = await fetch("https://api.kawalcorona.com/", {
method: "GET",
});
let result = await doFetch.json();
result.filter((data) => {
if (data.attributes.Country_Region === "Indonesia") {
document.getElementById("confirmed").innerText = numberWithCommas(
data.attributes.Confirmed
);
document.getElementById("recovered").innerText = numberWithCommas(
data.attributes.Recovered
);
document.getElementById("deceased").innerText = numberWithCommas(
data.attributes.Deaths
);
document.getElementById("activeCare").innerText = numberWithCommas(
data.attributes.Active
);
let _date = new Date(data.attributes.Last_Update);
document.getElementById(
"metadataDate"
).innerText = `${_date.getUTCDate()} ${
monthNames[_date.getMonth()]
} ${_date.getFullYear()} ${_date.getHours()}:${_date.getMinutes()}:${_date.getSeconds()}`;
}
return true;
});
};
getData();</script>
<!-- Google Analytics -->
<script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.defer=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-142494062-1', 'auto');
ga('send', 'pageview');</script>
<!-- End Google Analytics -->Step #5 Simpan dan Lihat Hasilnya
Simpan Widget dan Lihat hasilnya.
Saran saya sebaiknya widget ini dipasang di posisi kanan atau kiri yang lebih kecil. Tidak disarankan untuk memasang di banner utama.
Penutup
Demikianlah tutorial cara pasang widget update virus corona Indonesia di blog ini. Bagikan informasi ini ke semua kerabat blogger lainnya. Semakin banyak yang tahu, semakin banyak kebaikan yang tersebar. Dan kita semua berdoa semoga penyebaran virus corona ini cepat selesai. Serta, negara Indonesia dan seluruh dunia bisa menyelesaikan masalah ini.
Tetap stay di rumah dan jaga kesehatan kita semua. Kita sehat, Indonesia akan kuat.
Aamiin.