Widget Info Covid-19 Indonesia ala Youtube – Jika kita mengakses situs Youtube dengan PC atau laptop, maka di pojok kiri bawah akan muncul kotak informasi tentang covid-19 yang ketika diklik akan diarahkan ke situs WHO.
Nah kali ini kita akan membuat hal serupa di blog kita yaitu widget info covid-19 yang kita arahkan ke situs resmi pemerintah Indonesia yaitu https://www.covid19.go.id/
Di sini saya sediakan 2 versi yaitu untuk blog NON AMP dan untuk blog AMP. Untuk demonya silahkan coba di tombol berikut:
Bagi yang ingin menggunakannya silahkan gunakan kode-kode di bawah ini.
1. Untuk NON AMP
Silahkan simpan kode CSS berikut ini di style blog Anda.
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.covid-box{width:calc(100% - 40px);max-width:640px;height:190px;background:#fff;box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);position:fixed;left:20px;bottom:20px;z-index:999;}
.covid-img,.covid-info{height:190px;float:left;padding:10px;}
.covid-img{width:190px;background:#333}
.covid-img img{width:100%;height:100%;display:block;}
.covid-info{width:calc(100% - 190px);padding:20px;font-family:Arial;font-size:16px;font-weight:400;line-height:1.5;color:#555;position:relative}
.covid-info h2{font-size:20px;font-weight:400;line-height:1;margin:0 0 20px;color:#333;}
.btn-covid{width:100%;border-top:1px solid #dedede;position:absolute;left:0;bottom:0;padding:0 10px}
.close-covid,.more-covid{float:right;padding:8px 10px;line-height:30px;text-decoration:none;color:#555;cursor:pointer;}
@media screen and (max-width:425px){.covid-img{display:none;}.covid-info{width:100%;}}Kemudian silahkan simpan kode HTML berikut di atas kode </body>
<div class="covid-box" id="covid">
<div class="covid-img">
<picture>
<source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0y68HKH0Gb_OfopwBKiRvi29yxsj2QSU5bAJITSVrJULBh2KJ6beR5NPgsfu4SqthLCEt1aAVeSI0kHHSpWmnnJprz_QYb78FIWZaDmqNXAhbMeRvzy9DKAaVkpITfb0-9sykXZuk4LY/s200-rw/garuda.png" type="image/webp" />
<source srcset="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0y68HKH0Gb_OfopwBKiRvi29yxsj2QSU5bAJITSVrJULBh2KJ6beR5NPgsfu4SqthLCEt1aAVeSI0kHHSpWmnnJprz_QYb78FIWZaDmqNXAhbMeRvzy9DKAaVkpITfb0-9sykXZuk4LY/s200/garuda.png" type="image/png" />
<img alt="covid-19" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0y68HKH0Gb_OfopwBKiRvi29yxsj2QSU5bAJITSVrJULBh2KJ6beR5NPgsfu4SqthLCEt1aAVeSI0kHHSpWmnnJprz_QYb78FIWZaDmqNXAhbMeRvzy9DKAaVkpITfb0-9sykXZuk4LY/s200/garuda.png" width="1" height="1" title="Covid-19" />
</picture>
</div>
<div class="covid-info">
<h2>COVID-19</h2>
<div class="covid-text">Dapatkan informasi terbaru tentang Virus Corona
COVID-19 di Indonesia.</div>
<div class="btn-covid">
<a class="more-covid" href="https://www.covid19.go.id/" target="_blank" rel="nofollow noopener" title="Learn more" onclick="document.getElementById("covid").style.display="none"">Learn more</a>
<div aria-label="Close Note" class="close-covid" onclick="document.getElementById("covid").style.display="none"" role="button" tabindex="0">Dismiss</div>
</div>
</div>
</div>
2. Untuk AMP
Silahkan simpan kode CSS berikut ini di style blog Anda.
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
.covid-box{width:calc(100% - 40px);max-width:640px;height:190px;background:#fff;box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);position:fixed;left:20px;bottom:20px;z-index:999;}
.covid-img,.covid-info{height:190px;float:left;padding:10px;}
.covid-img{width:190px;background:#333}
.covid-img amp-img{display:block;}
.covid-info{width:calc(100% - 190px);padding:20px;font-family:Arial;font-size:16px;font-weight:400;line-height:1.5;color:#555;position:relative}
.covid-info h2{font-size:20px;font-weight:400;line-height:1;margin:0 0 20px;color:#333;}
.btn-covid{width:100%;border-top:1px solid #dedede;position:absolute;left:0;bottom:0;padding:0 10px}
.close-covid,.more-covid{float:right;padding:8px 10px;line-height:30px;text-decoration:none;color:#555;cursor:pointer;}
@media screen and (max-width:425px){.covid-img{display:none;}.covid-info{width:100%;}}Kemudian silahkan simpan kode HTML berikut di atas kode </body>
<div class="covid-box" id="covid">
<div class="covid-img">
<amp-img alt="covid-19" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0y68HKH0Gb_OfopwBKiRvi29yxsj2QSU5bAJITSVrJULBh2KJ6beR5NPgsfu4SqthLCEt1aAVeSI0kHHSpWmnnJprz_QYb78FIWZaDmqNXAhbMeRvzy9DKAaVkpITfb0-9sykXZuk4LY/s200-rw/garuda.png" width="1" height="1" title="Covid-19" layout="responsive"><amp-img fallback="" alt="covid-19" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0y68HKH0Gb_OfopwBKiRvi29yxsj2QSU5bAJITSVrJULBh2KJ6beR5NPgsfu4SqthLCEt1aAVeSI0kHHSpWmnnJprz_QYb78FIWZaDmqNXAhbMeRvzy9DKAaVkpITfb0-9sykXZuk4LY/s200/garuda.png" width="1" height="1" title="Covid-19" layout="responsive"></amp-img></amp-img>
</div>
<div class="covid-info">
<h2>COVID-19</h2>
<div class="covid-text">Dapatkan informasi terbaru tentang Virus Corona
COVID-19 di Indonesia.</div>
<div class="btn-covid">
<a class="more-covid" href="https://www.covid19.go.id/" target="_blank" rel="nofollow noopener" title="Learn more" on="tap:covid.hide">Learn more</a>
<div aria-label="Close Note" class="close-covid" on="tap:covid.hide" role="button" tabindex="0">Dismiss</div>
</div>
</div>
</div>
Untuk logo Garuda pada widget ini sudah menggunakan image WEBP, jadi tidak akan mengurangi nilai pagespeed blog Anda.
Dengan widget ini kita bermaksud memberikan info yang valid tentang pandemi yang sedang terjadi saat ini, sehingga pengunjung tidak mudah termakan isu hoax yang dapat memperburuk situasi.
Mari kita berdo’a bersama agar pandemi virus Corona covid-19 ini segera berakhir dan kita semua selamat, aamiin.
Selanjutnya, widget info covid-19 ini bisa kita gunakan untuk hal-hal lainnya, misalnya menampilkan postingan unggulan dan lainnya.
Disqus comments