Cara Membuat Widget Statistik Perkembangan Corona / Covid-19 di Blogger

By Fahrinheit 29 Mar, 2020 Post a Comment

Cara Membuat Widget Perkembangan Corona di Blogger - Seperti yang kita ketahui bahwa banyak negara di dunia yang sekarang terkena wabah Covid-19 (Corona Virus Disease - 2019). Salah satu negara yang terdampak akan adanya virus ini ialah Indonesia. Dengan adanya wabah corona ini tentunya kita harus waspada karena corona merupakan virus yang sudah masuk kategori epidemi dunia dan banyak menyebabkan kematian.

Dalam hal ini WHO sangat menyarankan para masyarakat yang terkena wabah corona ini untuk melakukan kegiatan social distancing dan physical distancing. Dampaknya tentu ini sangat mengganggu dari segi produktifitas, ekonomi dan lain sebagainya. Selain itu juga akan menyebabkan keterbatasan informasi yang bisa kita dapatkan terutama bagi mereka yang sudah terbiasa berkegiatan sosial.

Nah disinilah peran kita sebagai blogger untuk membantu memberikan informasi yang tepat serta akurat tentang perkembangan corona terkini, terutama di negara Indonesia. Apa yang bisa anda lakukan? Salah satunya anda bisa memasang widget statistik perkembangan kasus Corona di Indonesia di blog anda.

widget-statistik-perkembangan-corona-blogger

Untuk membuat widget statistik perkembangan corona di blogger caranya sangat mudah, bahkan bisa dilakukan oleh pemula seperti saya sekalipun. Anda tinggal cukup menambahkan beberapa script agar widget bisa menampilkan statistik perkembangan corona.

Bagaimana scriptnya? Tenang saja akan blogotech bagikan pada artikel kali ini dengan berbagai macam desain. Jadi anda tinggal pilih, copy scriptnya dan silahkan pasang pada widget HTML. Widgetnya sendiri terserah bisa anda pasang di sidebar, header, footer atau bahkan di dalam artikel postingan sekalipun.

Baiklah langsung saja berikut di bawah ini script untuk pemasangan widget statistik perkembangan corona di blogger. Silahkan anda pilih tampilan yang menarik berikut di bawah ini :

Tampilan Pertama

widget-statistik-perkembangan-corona-indonesia

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var d = new Date();
$("#date").html(d.getDate() + "/" + d.getMonth() + "/" + d.getFullYear());
    $.ajax({url: "https://api.kawalcorona.com/indonesia/", success: function(result){
     $("#terjangkit").html(result[0].positif + " orang");
     $("#sembuh").html(result[0].sembuh + " orang");
     $("#meninggal").html(result[0].meninggal + " orang");
    }});
});
</script>
</head>
<body>
<h1>Data Corona: <span id="date"></span></h1>
<div>Terjangkit : <span id='terjangkit'></span></div>
<div>Sembuh : <span id='sembuh'></span></div>
<div>Meninggal : <span id='meninggal'></span></div>
</body>
</html>

Tampilan Kedua

<!doctype html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var d = new Date();
$("#date").html(d.getDate() + "/" + (d.getMonth()+1) + "/" + d.getFullYear());
    $.ajax({url: "https://api.kawalcorona.com/indonesia/", success: function(result){
     $("#terjangkit").html(result[0].positif + " orang");
     $("#sembuh").html(result[0].sembuh + " orang");
     $("#meninggal").html(result[0].meninggal + " orang");
    }});
});
</script>

<h1>Update Kasus Corona Di Indonesia: <span id="date"></span></h1>
<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#F0F8FF; text-align: left;">Terjangkit : <span id='terjangkit'></span>
<br>
Sembuh : <span id='sembuh'></span>
<br>
Meninggal : <span id='meninggal'></span></div>
<div>Data di update secara berkala dari kawalcorona.com</div>

</!doctype>

Tampilan Ketiga

<!DOCTYPE html>
<html>
<head>
<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: 30px;
    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:18px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var d = new Date();
$("#date").html(d.getDate() + "/" + 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>
</head>
<body>
<div class="datax">
<div class="title">
<h1>covid-19 indonesia : <span id="date"></span></h1>
</div>
<div id="show" class="positif">
<div id="positif" class="angka">

</div>
<span class="detail">Positif</span>
</div>
<div id="show" class="sembuh">
<div id="sembuh" class="angka"></div>
<span class="detail">Sembuh</span>
</div>
<div id="show" class="meninggal">
<div id="meninggal" class="angka"></div>
<span class="detail">Meninggal</span>
</div>
</div>

</body>
</html>

Tampilan Keempat

<!DOCTYPE html>
<html>
<head>
<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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<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>
</head>
<body>
<div class="datax">
<div class="title">
<h1>covid-19 indonesia : <span id="date"></span></h1>
</div>
<div id="show" class="positif">
<div id="positif" class="angka">

</div>
<span class="detail">Positif</span>
</div>
<div id="show" class="sembuh">
<div id="sembuh" class="angka"></div>
<span class="detail">Sembuh</span>
</div>
<div id="show" class="meninggal">
<div id="meninggal" class="angka"></div>
<span class="detail">Meninggal</span>
</div>
</div>

</body>
</html>

Tampilan dengan Emoji Versi Horizontal

Tampilan dengan Emoji Versi Vertikal

Widget Statistik Perkembangan Corona Skala Provinsi

widget-statistik-perkembangan-corona-provinsi

<!doctype html>

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

<div id="div1" ><h2>Let jQuery AJAX Change This Text</h2></div>
<div id="show"></div>

<script >
$(document).ready(function(){
    $.ajax({url: "https://api.kawalcorona.com/indonesia/provinsi/", success: function(result){
    var select = "<select id='prov' onchange='getval(this);'>";
      var count = Object.keys(result).length;
      for(var i = 0; i < count; i++){
      select += "<option class='s' value='" + i + "'>" + result[i].attributes.Provinsi + "</option>";
      }
      select += "</select>";
      $("#div1").html(select);

    }
    });
    getval(0);

});
function getval(id){
$.ajax({url: "https://api.kawalcorona.com/indonesia/provinsi/", success: function(result){
var i;
if( id !== 0){
i = id.value;
} else {
i = id;
}
var html = "<h1>Data Korban COVID-19 Daerah " + result[i].attributes.Provinsi + "</h1>";
    html += "<div>Positif: " + result[i].attributes.Kasus_Posi + "</div>";
    html += "<div>Sembuh: " + result[i].attributes.Kasus_Semb + "</div>";
    html += "<div>Meninggal: " + result[i].attributes.Kasus_Meni + "</div>";
    $("#show").html(html);

    }
    });
}
</script>

</!doctype>

Nah itulah tadi cara membuat widget statistik perkembangan corona / covid-19 di Indonesia. Untuk pemasangannya sendiri tampaknya tidak perlu blogotech jelaskan karena semuanya pasti sudah paham, bahkan pemula seperti saya sekalipun. Tinggal tambahkan widget HTML lalu masukkan salah satu script di atas sesuai dengan tampilan yang anda inginkan.

Demikian artikel blogotech kali ini tentang memasang widget perkembangan corona di blogger. Semoga bermanfaat bagi para blogger yang ingin memberikan informasi terkait perkembangan corona. Inilah salah satu hal yang dapat kita (para blogger) lakukan dengan memberikan informasi tepat dan akurat selama #dirumahaja. Ayo kita bersatu kalahkan corona kintil.

Blogotech

Cara Membuat Widget Statistik Perkembangan Corona / Covid-19 di Blogger

No comments for "Cara Membuat Widget Statistik Perkembangan Corona / Covid-19 di Blogger"

Post a Comment