Beberapa bulan lalu dunia dihebohkan oleh sebuah virus yang berasal dari Wuhan, China. Virus ini disebut dengan Corona Virus dengan codename COVID-19.
Seiring berkembangnya waktu, virus tersebut telah menyebar keseluruh penjuru dunia, termasuk di Indonesia.
Masyarakat indonesia saling kerja sama untuk menekan pertumbuhan virus ini, dimulai dari diri sendiri tentunya, seperti seperti mengurangi kegiatan diluar, hingga menjaga kebersihkan diri setiap hari.
Sebagai seseorang yang bergelut di dalam dunia teknologi, kita mungkin ada keinginan untuk membantu masyarakat luas, seperti yang telah dilakukan oleh para dokter dan relawan yang ada di luar sana.
Jika kita seorang software engineer, dapat mencoba untuk bergabung ke https://kawalcorona.com/ untuk membangun platform mereka.
Jika kita seorang tech enthusiast yang kurang memiliki keahlian pemrograman, namun memiliki website atau blog, setidaknya kita dapat berkontribusi kepada masyarakat dengan memberikan informasi yang akurat dan tepat.
Dari background diatas, saya mencoba membuat sebuah widget yang dapat dipasang di website pribadi masing-masing. Widget yang saya buat dapat memberikan statistik COVID-19 yang ada di Indonesia saat ini.
Widget yang dibangun menggunakan API yang dimiliki oleh https://kawalcorona.com/ , saya sangat berterimakasih dengan adanya API ini.
Cara Pasang Widget Kawal Corona
Cara pemasangannya cukup simple, saya coba menjelaskan cara pemasangan di wordpress dan blogspot.
Pasang widget kawal corona di WordPress
Untuk website yang dibangun dengan wordpress, kita dapat masuk ke halaman Tampilan, lalu masuk ke menu Widget.
Setelah itu, kita tambahkan widget HTML Khusus kedalam sidebar. Lalu pada kolom isi di widget HTML Khusus kita tambahkan script dibawah ini
<div id="kopi-covid"></div>
<script>
var f = document.createElement("iframe");
f.src = "https://kopi.dev/widget-covid-19/";
f.width = "100%";
f.height = 380;
f.scrolling = "no";
f.frameBorder = 0;
var rootEl = document.getElementById("kopi-covid");
console.log(rootEl);
rootEl.appendChild(f);
</script>Seperti dibawah ini
Pasang widget kawal corona di Blogger / Blogspot
Untuk memasang widget kawal corona di Blogger/Blogspot kalian dapat masuk ke halaman Tata Letak, lalu klik tombol “Tambahkan Widget”. Saat muncul popup, kalian pilih menu HTML/JavaScript ini:
<div id="kopi-covid"></div>
<script>
var f = document.createElement("iframe");
f.src = "https://kopi.dev/widget-covid-19/";
f.width = "100%";
f.height = 380;
f.scrolling = "no";
f.frameBorder = 0;
var rootEl = document.getElementById("kopi-covid");
console.log(rootEl);
rootEl.appendChild(f);
</script>Lalu tambahkan script diatas tadi kedalam kolom Konten, seperti ini:
Pasang widget kawal corona di Laravel
Untuk pemasangan widget pada Laravel, cukup mudah sekali, kita tinggal buka blade template yang kita miliki, lalu kita sematkan script html diatas ke lokasi yang kita inginkan
Mengatur ketinggian & warna widget kawal corona
Untuk mengatur ketinggian widget kawal corona, kalian dapat mengubah nilai ketinggian pada baris f.height = 380; , dan untuk menggunakan widget kawal corona berwarna gelap, kalian dapat mengubah url pada baris f.src = "https://kopi.dev/widget-covid-19/"; menjadi f.src = "https://kopi.dev/widget-covid-19/?dark=true";
Mode terang widget kawal corona
Mode gelap widget kawal corona
Copas boi 😀
bg kodenya udah nggk jalan lagi ya bang?
Sudah jalan lagi ya, ada kesalahan server. Thank you.
Mantap banget bang
Thanks bos
Halo gan. Thanks. Kalau untuk informasi corona seluruh dunia gimana?
Masih belum ada, kalau sudah rilis, kami infokan.
Gan ijin make widget nya ya. mantep banget sbg informasi. terima kasih banyak
Siap gan, terimakasih banyak.
mantap, widget buatan kopi dev ini dipasang di halaman situs website Humas Polri ..
Iya gan, saya cukup senang. Terimakasih ya
Mantap ni, tambahin peta sebaranya pak, suka mode gelapnya.
Thanks pak.
Selamat Pagi, Bos.
Sy pasang di web sy bisa tampil.
tapi mau minta tolong. kalo untuk menampilkan tulisan sumber dari mana dengan link. gmn caranya?
Saya kurang menangkap pertanyaan Anda, Pak.
ditambahin tulisan :
Sumber Data dari : Kementerian Kesehatan Republik Indonesia.
gitu min
Saya tidak ambil data dari kementerian pak.
Untuk tampilan luar bisa diganti tidak min?
Diganti dengan CSS saja pak.
Menghilangkan tulisan pasang widget gmn yah gan
Tulisan yang mana gan?
Izin pasang di http://www.muaraindonesia.com
Semoga bermanfaat gan
Wah ini yang dicari2 sejak kemarin Bang, btw ma kasih banget atas script widgetnya. Bagus tampilannya dan rapi. Udah saya pasang di widget blog saya.
Menghilangkan tulisan pasang widget gmn yah gan
Tulisan yang mana gan?
Semoga bermanfaat gan Widget covid-19 ini.
Pakai Jaringan Simpati Juga sama boosq g muncul datanya
I see.. okay boskuh, nanti aku coba cek lagi ya, nunggu senggang. Thank you infonya.
siap bosq sekarang sudah muncul semoga berkah ilmu yang di share ….
terus berkarya bossq,
Amiiin, terimakasih doanya.
kalo pasang di bawah menu gmn ya bang?
Kodenya diletakkan dibawah menunya saja boskuh
Mantaf..
Izin pasang gan,
terimakasih sdh berbagi..
Siap kawan. Semoga bermanfaat.
Bagus min udah ku pasang kok cmn knp tdk work saat versi seluler ya?
Bukan tidak work. Kalau pakai sinyal dari Indihome, datanya suka nggak keluar, ini akibat dari Indihome yang memblokir beberapa IP luar negeri.
Bagaimana cara menyesuaikan ukuran font yg terlalu besar? Jumlah pasien terkonfirmasi dan yg dirawat sdh 5 digit sehingga tumpang tindih.
Sudah di update ya masbro. Semoga bermanfaat.
Segera di update ya mas, terimakasih masukannya.
Tambahin juga peta sebaran seluruh indonesia dong min. terima kasih
Ide ditampung gan, semoga ada waktu untuk develop versi petanya.
Izin pasang gan.. keren.. sukses slalu semoga covid-19 hilang dan dunia normal kembali..
Siap gan… semoga bermanfaat
Ditunggu yang cdn terbaru aja min..😂
Kyaknya indihome blm bs bersahabat wkwkwk
Hi Bang, sekarang angkanya tidak muncul, apakah ada masalah dengan api nya? di situs saya juga demikian corona.sirajin.com, statistiknya tidak muncul. Apakah Anda bisa membantu??
Jadi begini, API corona menggunakan cloudflare. Sekarang cloudflare sedang tidak bersahabat dengan Indihome. Karena Indihome memblock beberapa IP dari luar negeri. Solusinya hanya menunggu Indihome berbaik hati.
Nanti coba saya buatkan widget corona yang paling baru ya.
Kok ga muncul datanya angkanya gan ??
Thanks Gan, tampilannya cocok banget. Izin pasang ya 🙏
Siap gan, semoga bermanfaat ya, kalau ada masukan saya sangat menerima gan.
Ditunggu aja gan, pakai Indihome ya? Kalau pakai indihome emang gitu. Ini kita mau migrasi ke cdn yg lebih cepet. Ditunggu updatenya
Auto pasang
Terimakasih boskuh. Semoga bermanfaat
Di blog aku cuma kopi iframe code nya doang bisa kok Prof
Iya boskuh, emang bisa. Tak buat kaya gitu biar elegan aja. Haha.
emg mantav min 😄