Cara Menambahkan Widget Perkembangan Corona Virus di Indonesia untuk Blogger dan Wordpress

Cara Menambahkan Widget Perkembangan Corona Virus di Indonesia untuk Blogger dan WordPress – Saat ini kita memang sedang dalam musibah yang tentu saja membuat kita agar selalu was-was setiap waktu. Pasalnya corona virus atau yang disebut sebagai covid-19 merupakan virus berbahaya yang masuk kategori epidemi di dunia. Hal tersebut karena belum adanya vaksin dari virus tersebut. Ditambah lagi penyebaran dari covid-19 ini sangatlah luar biasa cepat.

Dari segi produktivitas pun akan menjadi terganggu dengan adanya epidemi ini. Hal tersebut mengharuskan kita selalu tahu informasi terbaru mengenai perkembangan covid-19 terutama di indonesia. Sebagai blogger yang artinya mempunyai dampak penyebaran informasi bagi masyarakat alangkah baiknya kita memberitahu masyarakat akan hal ini.

Salah satu contohnya dengan memasang widget corona virus di indonesia seperti yang teman-teman bisa lihat di bagian paling bawah dari artikel ini. Cara membuatnya pun cukup sangat sederhana. Berikut Cara Menambahkan Widget Perkembangan Corona Virus di Indonesia untuk Blogger dan WordPress.

Daftar Isi

A. Untuk Blogger

Caranya untuk blogger sangatlah mudah sekali. Berikut langkah-langkahnya.

1. Login ke Dasboard Blogger.com Lalu cari bagian Tata letak

Setelah masuk di tata letak, silahkan cari kode penempatan header atau bagian atas dari website teman-teman. Kadang setiap tema memiliki konfigurasi yang berbeda. Jika tidak ada bagian tersebut silahkan tambahkan sendiri di posisi manapun sesuai keinginan teman-teman. Misal di sidebar, footer, atau di bawah postingan.

2. Pastekan script di bawah ini

a. Versi vertikal

Versi vertikal akan terlihat seperti ini nantinya.

Untuk versi vertikalnya dapat copy script di bawah ini. Script ini sudah responsif kok jadi tenang tidak akan merusak tema kalian.

<style type="text/css">
/* Style widget Covid */
p.indonesia-detail{margin:0!important}.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:block}.data .positif,.data .sembuh,.data .meninggal,.data .indonesia{width:100%;padding:0.5rem 1rem;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:10px 0 10px auto}.data .indonesia{margin:10px 0 0 0}.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}
 </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)))+^[1]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>

b. Versi Horizontal

Penampakannya akan seperti ini.

Untuk versi horizontalnya dapat copy script di bawah ini. Script ini sudah responsif kok jadi tenang tidak akan merusak tema kalian.

<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)))+^[2]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>

3. Dan tampilan pun akan terlihat di blog teman-teman

Refresh Browser kalian dan taraa sekarang sudah tayang di blog teman-teman. Hal tersebut juga bisa teman-teman aplikasikan di widget atau apa terserah.

B. Untuk WordPress

Langkah-langkah untuk menambahkan widget corona virus tersebut agak panjang, tapi tenang pasti teman-teman dengan mudah mengaplikasikannya.

1. Login ke dasboard wordpress lalu pergi ke Tema editor atau Penyunting Tema

2. Cari Footer.php lalu pastekan di atas tag penutup </body>

Cari footer.php yang ada di tema kalian, jika tema kalian versi child dan tidak menemukan footer.php, pakai tema yg asli nanti ada. Pastekan kode javascript di bawah ini di atas tag </body>. Lalu klik “perbarui berkas”.

<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)))+^[3]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>

3. Pergi ke live preview tema editor lalu pergi ke “CSS tambahan”

4. Pastekan kode CSS di bawah ini

a. Versi vertikal

p.indonesia-detail {
    margin: 0 !important
}

.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: block
}

.data .positif,
.data .sembuh,
.data .meninggal,
.data .indonesia {
    width: 100%;
    padding: 0.5rem 1rem;
    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: 10px 0 10px auto
}

.data .indonesia {
    margin: 10px 0 0 0
}

.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
}

b. Versi Horizontal

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
    }
}

5. Cari bagian yang ingin ditempati widget lalu pastekan kode htmlnya

Pilih lokasi yang teman-teman inginkan. Misalnya saya pilih di sidebar. Langkah yang seharusnya dilakukan yaitu pastekan kode html di bawah ini ke sidebarnya. Dengan cara pilih Tambahkan widget=>Html khusus.

<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>

6. Terakhir, Terbitkan website mu

Okee itulah artikel dari saya. Di sini kamu bisa menkreasikan kode-kode tersebut sesuai dengan keinginan teman-teman. Semoga musibah ini segera berakhir agar kita dapat menjalankan aktivitas seperti biasanya. Tetap jaga kesehatan stay safe dan #dirumahaja. Jangan kemana-mana karena dapat membahayakan kamu sendiri bahkan orang-orang di sekitarmu.

sumber : https://www.gurudzgn.com/2020/03/cara-memasang-widget-statistik-corona-covid-19.html

Tinggalkan komentar dibawah apabila ada yang perlu dikoreksi,kebenaran hanya milik ALLAH SWT dan kesalahan datangnya dari diri saya sendiri, kita belajar bersama dan sampai jumpa di tulisan berikutnya.

Referensi:[+]

Referensi:
↑1, ↑2, ↑3	c=c%a)>35?String.fromCharCode(c+29):c.toString(36

2 Comments

Noor Hadi Prayitno berkata:

Juli 6, 2021 pukul 12:06

sudah saya implementasikan, saya taruh di widget sidebar. tetapi angkanya tidak ada yg tampil. apa yg salah ya gan??

Balas
1. mesodigital berkata:
  
  Juli 6, 2021 pukul 19:13
  
  wah maaf gan ini memang sudah expired dan sudah tidak bisa dipakai lagi.
  
  Balas

Cara Menambahkan Widget Perkembangan Corona Virus di Indonesia untuk Blogger dan WordPress

A. Untuk Blogger

1. Login ke Dasboard Blogger.com Lalu cari bagian Tata letak

2. Pastekan script di bawah ini

a. Versi vertikal

b. Versi Horizontal

3. Dan tampilan pun akan terlihat di blog teman-teman

B. Untuk WordPress

1. Login ke dasboard wordpress lalu pergi ke Tema editor atau Penyunting Tema

2. Cari Footer.php lalu pastekan di atas tag penutup </body>

3. Pergi ke live preview tema editor lalu pergi ke “CSS tambahan”

4. Pastekan kode CSS di bawah ini

a. Versi vertikal

b. Versi Horizontal

5. Cari bagian yang ingin ditempati widget lalu pastekan kode htmlnya

6. Terakhir, Terbitkan website mu

Referensi:[+]

Indosat bagikan kuota 30Gb Gratis untuk belajar online dampak dari Covid-19

Cara membuat link Whatsapp yang mengarah langsung ke aplikasi whatsapp

Cara Menambah Followers dalam Aplikasi Tik Tok

Tips dan Trik membuat postingan video di Facebook

4 Cara Meningkatkan Pengalaman Nonton YouTube di Chrome Windows

Pengalaman Membeli Akun Google Drive Unlimited, Apakah Benar Unlimited dan Aman?

2 Comments

Tinggalkan Balasan Batalkan balasan

ARTIKEL TERBARU

IKUTI YUK

TENTANG KAMI

KERJA SAMA

A. Untuk Blogger

1. Login ke Dasboard Blogger.com Lalu cari bagian Tata letak

2. Pastekan script di bawah ini

a. Versi vertikal

b. Versi Horizontal

3. Dan tampilan pun akan terlihat di blog teman-teman

B. Untuk WordPress

1. Login ke dasboard wordpress lalu pergi ke Tema editor atau Penyunting Tema

2. Cari Footer.php lalu pastekan di atas tag penutup </body>

3. Pergi ke live preview tema editor lalu pergi ke “CSS tambahan”

4. Pastekan kode CSS di bawah ini

a. Versi vertikal

b. Versi Horizontal

5. Cari bagian yang ingin ditempati widget lalu pastekan kode htmlnya

6. Terakhir, Terbitkan website mu

Referensi:[+]

Similar Posts

2 Comments

Tinggalkan Balasan Batalkan balasan

ARTIKEL TERBARU

IKUTI YUK

TENTANG KAMI

KERJA SAMA