Saturday, March 28, 2020

Cara memasang widget Covid-19 di blogger blogspot

Hasan Askari : Cara memasang widget Covid-19 di blogger blogspot

Tanpa basa-basi

Saat ini saya ingin berbagi tutorial mengenai cara memasang widget Covid-19 Indonesia di blogger blogspot. Supaya dengan adanya widget ini, para pengunjung bisa memantau seberapa banyak korban dari Covid-19.

Kode widget Covid-19

Untuk kodenya, sengaja saya ambil dari panduancode.com sebab kodenya terlihat lebih simpel dibanding kode lainnya.
Kodenya tersebut diambil dari website kawalcorona.com menggunakan API yang sudah disediakan. API sendiri merupakan perangkat yang bisa menghubungkan antar website/aplikasi secara realtime.

Kodenya terdiri dari 3 bagian:

1. Style

Kode style ini berfungsi untuk memberi desain pada widget sehingga terlihat lebih enak dilihat.
Berikut keterangannya:
.datax .show : untuk mendesain lebar
.datax .positif, .sembuh, .meninggal : menambahkan bayangan, mengatur fontnya serta warna backgroundnya.
.datax .show .angka : mendesain angka
.datax .show .detail : mengatur teks keterangan positif, sembuh, meninggal
.datax .title : mendesain judulnya

<style>

.datax .show{
    width: 31%;
    float: left;
    text-align: center;}

.datax .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;
    /*ini jenis fontnya*/
    font-family:monospace;
    /*ini warna backgroundnya*/
    background-color:#343345;} 

.datax .show .angka 
{ font-size: 2em; font-weight: 700;}


.datax .show .detail{ background: white; width: 100%; display: block; color: black; padding:2px} .datax .title { text-align: center; text-transform: uppercase; font-family: monospace; font-size:1em;} </style>

2. Html

Adapun kode HTML fungsinya untuk membuat kerangkanya. Dengan kode ini, kita bisa menyesuaikan apakah widget ini ingin diletakkan di header, footer, atau isi.

<div class="datax">
<div class="title">
<h1>covid-19 indonesia : <span id="date"></span></h1>
</div>
<div class="show positif">
<div id="positif" class="angka"></div>
<span class="detail">Positif</span>
</div>
<div class="show sembuh">
<div id="sembuh" class="angka"></div>
<span class="detail">Sembuh</span>
</div>
<div class="show meninggal">
<div id="meninggal" class="angka"></div>
<span class="detail">Meninggal</span>
</div>
</div>

3. Javascript

Javascript ini berfungsi untuk mengambil API dari kawalcorona.com. Selain itu, kode ini berguna juga supaya tanggal yang ditampilkan bisa update terus secara otomatis.

<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({async: true, cache: true, 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>

Cara menggunakan

Adapun cara menggunakannya ada dua cara, yaitu:

A. Menggunakan widget

Jika kita ingin cepat memasang kodenya dan enggan mengutak-atik template, maka silakan menggunakan cara ini.

Menempatkan kode javascript dan html

1. Pergi ke menu tata letak
2. Tambahkan widget html/javascript
3. Masukkan kode html dan javascript pada widget tersebut
4. Simpan widget

Menambahkan kode css

1. Silakan buka menu tema
2. Tekan tombol sesuaikan
3. Tekan tombol sesuaikan lebar
4.Masukkan kode css di situ, kemudian simpan

Jika sudah, maka secara otomatis widget akan muncul di blog kita masing-masing. Akan tetapi, memakai cara ini menurut saya kurang efisien. Mengapa? Karena kode javascriptnya akan muncul di tengah-tengah blog kita. Tentunya ini akan mempengaruhi cepat lambatnya blog kita. Untuk itu, sebaiknya lakukan cara yang kedua saja.

B. Menggunakan template

Nah, supaya script Covid-19 nya tidak memberikan dampak yang amat buruk kepada blog, maka silakan ikuti langkah berikut ini;
1. Buka menu tema
2. Tekan tombol edit HTML
3. Letakkan kode javascript tepat di atas kode </body>
4. Letakkan kode css tepat di atas kode </style> atau ]]</b:skin>. Silakan pilih salah satunya.
5. Letakkan kode HTML sesuai yang kita mau. Bisa langsung menempatkannya di template atau melalui menu tata letak. Khusus kode HTML, saya sarankan diletakkan melalui widget seperti pada cara pertama, sebab jika salah menempel kodenya di template, maka akan menyebabkan eror. Atau jika kita ingin menampilkannya dalam postingan, bisa juga kok. Asalkan kode HTML-nya ditaruh di mode HTML.

Adapun, bagi Anda yang sudah menguasai pengeditan template, monggo dipilih mau pake cara yang mana.

6. Simpan tema
Jika langkah tersebut dilakukan dengan benar, maka bisa dipastikan tidak akan ada eror.

Oiya, untuk demonya ada di blog ini di bagian paling bawah (footer)

Baca juga:
Alasan penting memasang disclaimer bahasa Indonesia beserta contoh disclaimer bahasa Indonesia

Sebagai penutup

Dengan mengetahui perkembangan Covid-19 melalui widget yang dipasang, semoga saja para pengunjung bisa lebih berhati-hati dalam menjaga diri agar korban tidak semakin bertambah.

Disqus Codes
  • Untuk menulis teks tebal , sila gunakan atau
  • Untuk menulis teks miring, sila gunakan atau
  • Untuk menulis teks bergaris bawah , sila gunakan
  • Untuk menulis teks bergaris tengah , sila gunakan
  • Untuk menulis kode HTML, silakan pakai atau
    or

    dan gunakan parse tool below to easy get the style.
Show Parser Box

strong em u strike
pre code pre code spoiler
embed

Dapatkan Kabar Terbaru Melalui Email