Skip to main content
JEJAK UNIK

follow us

Cara Mudah Membuat Widget Covid-19 Informasi Tentang Virus Corona

Cara Mudah Membuat Widget Covid-19 Informasi Tentang Virus Corona

Cara Mudah Membuat Widget Covid-19 Informasi Tentang Virus Corona - Cara kerja widget ini cukup keren yaitu ketika seseorang mengakses situs Anda, maka secara otomatis akan keluar widget ini yang mengarah langsung ke situs resmi pemerintah https://www.covid19.go.id/.

Tentunya ini sangat bagus dan sangat membantu sobat blogger untuk mendapatkan informasi valid tentang wabah virus corona yang saat ini cukup membuat resah masyarakat dan dunia. Widget Covid-19 ini saya dapatkan dari salah satu mastah blogger blog Kompiajaib dan saya tulis kembali pada blog ini tentunya dengan harapan semoga dapat memberikan manfaat buat para pengunjung situs ini.

Tanpa berlama-lama kita langsung saja kelangkah pemasangan widget covid-19 ala youtube berikut ini, oia widget ini juga support untuk blog AMP. Berikut penerapannya:

1. UNTUK BLOG NON AMP

Silahkan simpan kode css dibawah 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%;}}

Lalu simpan kode pemanggil HTML dibawah ini di atas </body>

<div class="covid-box" id="covid">
  <div class="covid-img">
    <picture>
      <source srcset="https://4.bp.blogspot.com/-xQnppIExr78/XoB_aGncC7I/AAAAAAABNYA/6JUg4f56b1kWO2Wf1CnZJ_SWqAllJbZ3wCLcBGAsYHQ/s200-rw/garuda.png" type="image/webp" />
      <source srcset="https://4.bp.blogspot.com/-xQnppIExr78/XoB_aGncC7I/AAAAAAABNYA/6JUg4f56b1kWO2Wf1CnZJ_SWqAllJbZ3wCLcBGAsYHQ/s200/garuda.png" type="image/png" />
      <img alt="covid-19" src="https://4.bp.blogspot.com/-xQnppIExr78/XoB_aGncC7I/AAAAAAABNYA/6JUg4f56b1kWO2Wf1CnZJ_SWqAllJbZ3wCLcBGAsYHQ/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(&quot;covid&quot;).style.display=&quot;none&quot;">Learn more</a>
      <div aria-label="Close Note" class="close-covid" onclick="document.getElementById(&quot;covid&quot;).style.display=&quot;none&quot;" role="button" tabindex="0">Dismiss</div>
    </div>
  </div>
</div>

2. UNTUK BLOG AMP

Kalian bisa melihat tutorial cara membuat widget covid-19 ala youtube langsung langsung pada sumbernya pada link berikut SELENGKAPNYA

Bagaimana mudah bukan? selamat mencoba, semoga bermanfaat!

You Might Also Like:

Jika tertarik dengan artikel yang anda baca saat ini, berikan tanggapan melalui kolom komentar di bawah ini. Berkomentarlah yang cerdas, karena pintar saja tidak cukup.
Buka Komentar