Cara Memasang Widget Statistik Corona di Blogger Atau Wordpress

Januari 18, 2021

Cara Memasang Widget Statistik Corona Covid-19 di Blogger Atau Wordpress

Hi Web Developer!, Kembali lagi bersama dengan guru design. Kali ini guru design akan berbagi tutorial cara memasang widget Statistik Corona, melihat dunia yang semakin hari semakin tidak bersahabat, dan masyarakat yang sulit untuk di atur untuk melakukan social distance. Saya berharap dengan banyaknya para developer yang memasang widget ini maka dapat meningkatkan kesadaran masyarakat, karena mereka bakal tau kalau negeri tercintanya tidak baik-baik saja.

Disini saya akan membagikan widget yang sama tetapi dengan dua gaya widget panjang dan persegi, jika kalian ingin memasannya di sidebar maka gunakan widget persegi, jika memasang di header dan panjang tempatnya maka gunakan widget panjang,

Untuk widget panjang seperti ini demonya:

Berikut ini codenya:

<style type="text/css">
/* Style widget Corona*/
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:&#39;&#39;;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>

Copy kode diatas lalu buka blog kalian.
Kemudian pilih tab tata letak atau layout.
Lalu pilih tambahkan gadget atau add a gadget.
Pada jendela yang muncul pilih HTML/JavaScript.
Terakhir paste kan kode nya di kolom kontent, judul biarkan kosong saja.

Untuk widget persegi seperti ini demonya:

Berikut ini codenya:

<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 lazy"><img class="lazy" data-src="https://kawalcorona.com/uploads/sad-u6e.png" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII=" 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 class="lazy" data-src="https://kawalcorona.com/uploads/happy-ipM.png" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII=" 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 class="lazy" data-src="https://kawalcorona.com/uploads/emoji-LWx.png" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII=" 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 class="lazy" data-src="https://kawalcorona.com/uploads/indonesia-PZq.png" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12P4zwAAAgEBAKrChTYAAAAASUVORK5CYII=" alt="Indonesia" /></div>
<div class="covid-more"><a class="cov-text-more" href="https://data.gurudzgn.com">View More</a>
</div>
   </div>
  </div>
<div class="title-cov">
 Sumber data : Kementerian Kesehatan & JHU. Update terakhir : <span id="date"></span>
</div>

Copy kode diatas lalu buka blog kalian.
Kemudian pilih tab tata letak atau layout.
Lalu pilih tambahkan gadget atau add a gadget.
Pada jendela yang muncul pilih HTML/JavaScript.
Terakhir paste kan kode nya di kolom kontent, judul biarkan kosong saja.

Jika ada kendala kesalahan atau error bisa ditanyakan di kolom komentar,

Sekian semoga bermanfaat terimakasih.

15 komentar

Unknown

Kalau yang seperti blog ini bagaimana..

Saya tadi coba malah widget nya agak kanan
- Rafiqi, S.Kom.
  
  Kalau yang seperti blog ini gunakan widget panjang tapi slot widgetnya harus panjang juga
Balas
Balas
Admin

kasi widget nya jangan setengah setengah, cob pasang di blog nya widget itu bagus tidak
- Rafiqi, S.Kom.
  
  Maksudnya gimana gan, kan sudah saya pasang di blog ini demonya.
  
  Jika ada masalah silahkan tanyakan trimakasih.
Balas
Balas
Sunartas

terimakasih banyak gan infonya bermanfaat sekali. btw itu realtime update trus ya gan karna ada .js ? atau bagaimana ?
sekalian gan mau tanya cara buat "baca juga 3 artikel" ditengah postingan kayak diatas itu gmna caranya gan ? terimakasih yaa gan
- Rafiqi, S.Kom.
  
  Iya gan itu bakal aupdate otomatis karena menggunakan API.
  
  Untuk "baca juga" itu saya belom buat tutorialnya, tapi saya rasa di google sudah banyak.
- Sunartas
  
  mau yaaa gan hihi cakep banget soalnya
- Rafiqi, S.Kom.
  
  Nanti saya buatin kalau longar waktunya.. Pantau aja terus ya. Di follow aja
- Sunartas
  
  ashiap gann yaik !
Balas
Balas
Rodhi

Saya pasang widget ini di blog wordpress Saya: rodhi.id dan berhasil! Kemudian Saya pasang widget ini di blog Saya yang: infotekno.id kok tulisan total Corona nya tidak keluar ya?
- Rafiqi, S.Kom.
  
  Pastikan style dan javascript ke copy.
  
  Jika tidak muncul warna dan gaya berarti style nya tidak ke copy
  
  Jika nilai total dll tidak tampil berarti javascript nya tidak ke copy.
Balas
Balas
Dzulkifli

Nambahin view more kyk punya Abang nya gmn

Balas
POP GENGS

Bang Bisa Buatin Quiz Online Ga:'(
Saya Cari2 Gada Yang Bisa Buat Kebanyakan Pake Platform. Kalo Bisa Buatin Dong Bang Quiz Online Terutama Untuk template Linkmagz. Modelnya Kayak Pilihan Ganda:')

Balas
Tutorial keren

Tolong di-update bro gabisa dipakai ga muncul tuh

Balas
Ini Hits

Terima kasih banyak gan

Balas

To insert a code use code_here
To insert a quote use your_qoute
To insert a picture use url_image_here