Tutorial Pasang Widget Corona Responsive untuk Blog

Daftar Isi [Sembunyikan]

    Tutorial Pasang Widget Corona Responsive untuk Blog


    Tutorial Pasang Widget Corona Responsive untuk Blog


    Tutorial Pasang Widget Corona Responsive untuk Blog - Diartikel ini saya akan mencoba membuat widget + pemasangan widget statistik realtime corona diblogspot. Apakah anda sedang mencari script code ini?, kalau iya silahkan simak sampai selesai.

    Statistik Widget corona ini mungin sangat bermanfaat bagi pengunjung yang sedang mencari hiburan / sekedar membaca artikel anda untuk mengisi waktu mereka.

    Sebelum melanjutkannya apakah anda tahu apa itu widget?


    Pengertian Widget


    Widget adalah sebuah program yang dipasang pada website atau blog dengan memakai beberapa kode. Widget bisa berupa video, flash, gambar, dan lainnya. Anda bisa mendapatkan banyak widget keren yang telah disediakan oleh setiap situs, atau anda bisa menamainya widget bawaan.

    Baca Juga: Cara Membuat Web HTML Keren dengan Notepad [Web Portofolio]


    Cara Membuat Widget Corona diblog


    Silahkan anda simak pemasangan widget corona melalui api kawalcorona.com dibawah ini.

    1. Silahkan login Blogger.com.
    2. Kemudian pilih Tata Letak > klik + Add a Gadget > HTML/Javascript.
    3. Lalu copy dan paste kode script dibawah ini.



    
<style>
.datax #show {
    width: 31%;
    float: left;
    text-align: center;
}
.positif, .sembuh, .meninggal {
    margin: 1%;
    border-radius: 5px;
    box-shadow: 0 1px 2px 2px rgba(0,0,0,.5);
    text-overflow: ellipsis;
    overflow: hidden;
    color: white;
    font-family: cursive;
}
.datax .positif {
    background: #f5a61f;
}
.datax .sembuh {
    background: #24c624;
}
.datax .meninggal {
    background: #ed2828;
}
#show .angka {
    font-size: 2em;
    font-weight: 700;
}
#show .detail {
    background: white;
    width: 100%;
    display: block;
    color: black;
    box-shadow: 0px -2px 4px 1px #66c7ff;
}
.datax .title {
    text-align: center;
    text-transform: uppercase;
    font-family: monospace;
    font-size:1em;
}
</style>
<script>
$(document).ready(function(){
var d = new Date();
var month = new Array();
  month[0] = "Januari";
  month[1] = "Februari";
  month[2] = "Maret";
  month[3] = "April";
  month[4] = "Mei";
  month[5] = "Juni";
  month[6] = "Juli";
  month[7] = "Agustus";
  month[8] = "September";
  month[9] = "Oktober";
  month[10] = "November";
  month[11] = "Desember";
 
$("#date").html(d.getDate() + " " + month[d.getMonth()] + " " + d.getFullYear());
    $.ajax({url: "https://api.kawalcorona.com/indonesia/", success: function(result){
     $("#positif").html(result[0].positif);
     $("#sembuh").html(result[0].sembuh);
     $("#meninggal").html(result[0].meninggal);
    }});
});
</script>
<div class="datax">
<div class="title">
<h1>Update kasus covid-19 indonesia : <span id="date">24 Maret 2020</span></h1>
</div>
<div id="show" class="positif">
<div id="positif" class="angka">686</div>
<span class="detail">Positif</span>
</div>
<div id="show" class="sembuh">
<div id="sembuh" class="angka">30</div>
<span class="detail">Sembuh</span>
</div>
<div id="show" class="meninggal">
<div id="meninggal" class="angka">55</div>
<span class="detail">Meninggal</span>
</div>
</div>


    Anda bisa menggunakan script kode dibawah ini (memiliki tema/design yang berbeda).


    
<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:&#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: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)))+((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>Sumber Widget : <a href="https://www.ansoriweb.com/">disini</a>
    
</div>


    Tampilan dari Widget Corona

    Berikut ini adalah tampilan widget corona yang ada discript diatas.


    Tutorial Pasang Widget Corona Responsive untuk Blog


    Baca Juga: Cara Membuat Form Login dengan PHP MySQLi

    Penutup


    Itulah tadi Tutorial Pasang Widget Corona Responsive untuk Blog. Semoga bermanfaat jika ada kekurangan mohon dimaafkan.
    Metalzoneblogspot.com

    Metalzoneblogspot.com