Cara Pasang Widget Informasi Kawal Corona Responsive

Widget Informasi Kawal Corona

LagZam - Apakabar sahabat blogger, pada kesempatan ini admin mau berbagi cara pasang widget kawal corona seperti blog LagZam yang responsive. Karena banyak para blogger yang mintak scripnya, maka admin akan berbagi lewat postingan ini.

Informasi dan perkembangan virus corona hari ini sangat perlu dan menjadi bahan referensi bagi semua orang terutama pengunjung blog atau website. Maka dari itu, saya akan memberikan materi tentang cara pasang informasi  corona responsive di blog atau website.

Adapun tujuan pemasangan informasi ini, tiada lain untuk memberikan informasi perkembangan virus corona di Indonesia, agar ke-hati-hati-an dan antisipasi kita dalam menjaga dan melawan virus yang mematikan.

Pengunjung akan mendapatkan dua manfaat di blog atau website kita. Selain dia mendapatkan ilmu dari artikel yang dia cari, juga mendapatkan informasi terupdate dari perkembangan virus corona di Indonesia ini. Maka, tuntutan kepada kita sebagai seorang blogger untuk memasang widget informasi virus corona responsive di blog.

Widget ini akan selalu terupdate sesuai dengan perkembangan dan informasi dari Tim Kesehatan Covid19 Indonesia. Jadi kita tidak perlu repot untuk mengubah dan memantau perkembangan covid19 pada blog atau website kita. 

Selain itu, kita hanya meng-copy paste html. Kode html ini sangat responsiv dan sesuai dengan dekstop atau mobile kita sendiri. Jadi, sangat efektif dan efesien dalam menginformasikan perkembangan virus corona ini.

Maka dari itu, saya akan memandu kalian untuk memasangkan widget informasi corona responsive di blog atau web kita dengan mudah dan gampang.

Caranya :

• Login Dashboard Blog atau Web 
• Tata Letak Blog atau Sidebar Website
• Copy Html

<style type="text/css">

/* Style widget Covid */

p{margin:0}.title-cov{text-align:center;color:#222;font-size:14px}.indonesia-title{font-size:20px;font-weight:600}.keterangan{font-size:10px;text-align:left;color:#ffffff}.data{margin:5px 0 10px;display:flex}.data .positif,.data .sembuh,.data .meninggal,.data .indonesia{width:25%;padding:1.5rem 1.5rem;border-radius:5px;position:relative}.data .positif:before,.data .sembuh:before,.data .meninggal:before,.data .indonesia:before{content:'';position:absolute;background:url(https://kawalcorona.com/data/images/svgs/circle.svg);background-position-x:0%;background-position-y:0%;background-repeat:repeat;background-position:right;background-repeat:no-repeat;width:100%;height:100%;opacity:0.5;top:0;left:0}.data .sembuh{margin:0 10px}.data .indonesia{margin:0 0 0 10px}.data .positif{background:#f82649!important;display:flex;box-shadow:0 5px 10px rgba(167,66,153,0.3)}.data .sembuh{background:#09ad95!important;display:flex;box-shadow:0 5px 10px rgba(167,66,153,0.3)}.data .meninggal{background:#d43f8d!important;display:flex;box-shadow:0 5px 10px rgba(167,66,153,0.3)}.data .indonesia{background:#fc7303!important;display:flex;box-shadow:0 5px 10px rgba(167,66,153,0.3)}.emoji img{width:50px}.emoji{margin-left:auto!important;width:50px!important}.angka{font-weight:600!important;font-size:20px}.indonesia-detail{width:100px}@media screen and (max-width:768px){.data .positif,.data .sembuh,.data .meninggal,.data .indonesia{width:48.55%;padding:10px;border-radius:5px;position:relative}.indonesia-title{font-size:18px}.data{display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.data .positif{margin:0 0 auto 0}.data .sembuh{margin:0 0 10px auto}.data .meninggal{margin:0}.data .indonesia{margin:auto 0 auto auto}.emoji{margin-left:auto!important;width:40px!important}}@media screen and (max-width:568px){.data .positif,.data .sembuh,.data .meninggal,.data .indonesia{width:48.55%;padding:10px;border-radius:5px;position:relative}.indonesia-title{font-size:18px}.data{display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.data .positif{margin:0 0 auto 0}.data .sembuh{margin:0 0 10px auto}.data .meninggal{margin:0}.data .indonesia{margin:auto 0 auto auto}.emoji{margin-left:auto!important;width:40px!important}}@media screen and (max-width:468px){.data .positif,.data .sembuh,.data .meninggal,.data .data .positif,.data .sembuh,.data .meninggal,.data .indonesia{width:48.44%;padding:10px;border-radius:5px;position:relative}.indonesia-title{font-size:18px}.data{display:-ms-flexbox;-ms-flex-wrap:wrap;flex-wrap:wrap}.data .positif{margin:0 0 auto 0}.data .sembuh{margin:0 0 10px auto}.data .meninggal{margin:0}.data .indonesia{margin:auto 0 auto auto}.emoji{margin-left:auto!important;width:40px!important}}@media screen and (max-width:368px){.data .positif,.data .sembuh,.data .meninggal,.data .indonesia{width:100%;padding:10px;border-radius:5px;position:relative}.data .positif{margin:0}.data .sembuh{margin:10px 0 10px 0}.data .meninggal{margin:0 0 10px 0}.data .indonesia{margin:0}}

 </style>

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

 <script>

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('B C=["\\p\\9\\q\\a\\9\\5\\b","\\v\\1\\h\\5\\a\\9\\5\\b","\\c\\9\\5\\1\\l","\\9\\w\\5\\b\\x","\\c\\1\\b","\\p\\a\\q\\b","\\p\\a\\x\\b","\\9\\D\\a\\m\\l\\a\\m","\\m\\1\\w\\l\\1\\c\\h\\1\\5","\\r\\E\\l\\r\\h\\1\\5","\\q\\r\\F\\1\\c\\h\\1\\5","\\y\\1\\m\\1\\c\\h\\1\\5","\\8\\2\\3\\y\\0\\3\\2","\\G","\\8\\2\\3\\c\\4\\7\\3\\i","\\8\\2\\3\\v\\s\\d\\d\\H\\2\\0\\e","\\i\\3\\f\\d","\\I\\t\\0\\3\\2","\\i\\3\\3\\n\\g\\J\\o\\o\\0\\n\\6\\j\\K\\0\\L\\0\\d\\k\\4\\e\\4\\7\\0\\j\\k\\4\\f\\o\\6\\7\\t\\4\\7\\2\\g\\6\\0\\o","\\n\\4\\g\\6\\3\\6\\z","\\j\\k\\4\\e\\u\\n\\4\\g\\6\\3\\6\\z","\\g\\2\\f\\A\\s\\i","\\j\\k\\4\\e\\u\\g\\2\\f\\A\\s\\i","\\f\\2\\7\\6\\7\\8\\8\\0\\d","\\j\\k\\4\\e\\u\\f\\2\\7\\6\\7\\8\\8\\0\\d","\\0\\M\\0\\N","\\e\\2\\0\\t\\O"]',51,51,'x61|x45|x65|x74|x6F|x52|x69|x6E|x67|x41|x55|x49|x4D|x6C|x72|x6D|x73|x42|x68|x2E|x63|x54|x53|x70|x2F|x4A|x4E|x4F|x75|x64|x2D|x46|x50|x4C|x44|x66|x62|var|_0x2460|x47|x4B|x56|x20|x59|x23|x3A|x6B|x77|x6A|x78|x79'.split('|'),0,{}));$(document)[_0x2460[26]](function(){var _0x90c3x1= new Date();var _0x90c3x2= new Array();_0x90c3x2[0]= _0x2460[0];_0x90c3x2[1]= _0x2460[1];_0x90c3x2[2]= _0x2460[2];_0x90c3x2[3]= _0x2460[3];_0x90c3x2[4]= _0x2460[4];_0x90c3x2[5]= _0x2460[5];_0x90c3x2[6]= _0x2460[6];_0x90c3x2[7]= _0x2460[7];_0x90c3x2[8]= _0x2460[8];_0x90c3x2[9]= _0x2460[9];_0x90c3x2[10]= _0x2460[10];_0x90c3x2[11]= _0x2460[11];$(_0x2460[17])[_0x2460[16]](_0x90c3x1[_0x2460[12]]()+ _0x2460[13]+ _0x90c3x2[_0x90c3x1[_0x2460[14]]()]+ _0x2460[13]+ _0x90c3x1[_0x2460[15]]());$[_0x2460[25]]({url:_0x2460[18],success:function(_0x90c3x3){$(_0x2460[20])[_0x2460[16]](_0x90c3x3[0][_0x2460[19]]);$(_0x2460[22])[_0x2460[16]](_0x90c3x3[0][_0x2460[21]]);$(_0x2460[24])[_0x2460[16]](_0x90c3x3[0][_0x2460[23]])}})});

 </script>

 <div class="data">

  <div class = "positif">

   <div class ="keterangan">

    <span>TOTAL POSITIF</span>

    <div class="cor-positif angka"></div>

    <span>ORANG</span>

   </div>

   <div class="emoji"><img src="https://kawalcorona.com/uploads/sad-u6e.png" alt="Positif" /></div>

  </div>

  <div class = "sembuh">

   <div class ="keterangan">

    <span>TOTAL SEMBUH</span>

    <div class="cor-sembuh angka"></div>

    <span>ORANG</span>

   </div>

   <div class="emoji"><img src="https://kawalcorona.com/uploads/happy-ipM.png" alt="Sembuh" /></div>

  </div>

  <div class = "meninggal">

   <div class ="keterangan">

    <span>TOTAL MENINGGAL</span>

    <div class="cor-meninggal angka"></div>

    <span>ORANG</span>

   </div>

   <div class="emoji">

    <img src="https://kawalcorona.com/uploads/emoji-LWx.png" alt="Meninggal" /></div>

   </div>

   <div class = "indonesia">

    <div class ="keterangan">

    <span class="indonesia-title">INDONESIA</span>

    <p class="indonesia-detail">POSITIF <span class="cor-positif"></span>, SEMBUH <span class="cor-sembuh"></span>, MENINGGAL <span class="cor-meninggal"></span></p>

   </div>

   <div class="emoji">

    <img src="https://kawalcorona.com/uploads/indonesia-PZq.png" alt="Indonesia" /></div>

   </div>

  </div>

<div class="title-cov">

 Sumber data : Kementerian Kesehatan & JHU. Update terakhir : <span id="date"></span>

</div>

Kemudian save dan lihat hasilnya.

Itulah cara membuat widget kawal corona di blog atau web yang responsive, semoga dapat bermanfaat bagi anda yang sedang mecari cara atau tutorialnya. Wassalam