Pasang Widget Statistik Kawal Corona Di Website

 by
Kopidev / Tips & Trick / Pasang Widget Statistik Kawal Corona Di Website

Kepada seluruh pengguna Widget COVID-19 disarankan agar melakukan update, dengan cara mengubah URL pada script Widget yang di sediakan. Tutorial update ada dibawah. Terima Kasih

admin

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.

Daftar Isi
  1. 1. Cara Pasang Widget Kawal Corona
    1. 1.1. Pasang widget kawal corona di WordPress
    2. 1.2. Pasang widget kawal corona di Blogger / Blogspot
    3. 1.3. Pasang widget kawal corona di Laravel
    4. 1.4. Mengatur ketinggian & warna widget kawal corona
      1. 1.4.1. Mode terang widget kawal corona
      2. 1.4.2. Mode gelap widget kawal corona

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

108 thoughts on “Pasang Widget Statistik Kawal Corona Di Website”

  13. Hallo… saya sampaikan kepada kopidev, bahwa sourcecode widget tersebut, tersedia di github. Namun sebelumnya saya berterima kasih kepada kopidev, telah membagikan aplikasi di github. Dan sekali lagi saya sampaikan, saya hanya menyerupai tampilan seperti yang kopidev buat. Dan kode script/aplikasi juga disediakan secara free oleh: Arry Anggara disini https://github.com/arryanggaputra/kopidev-widget.

    Tanpa terkecuali tidak membagikan kode aplikasi tersebut, seharunsya untuk kopidev, melicensikan widget tersebut, sehingga nantinya siapapun akan membelinya. Namu perlu saya garisbawahi: bahwa sourcecode widget, tersedia digithub.

    Kami memang sengaja membuat tampilan widget seperti kopidev. Sekali lagi, saya ucapkan terima kasih kpd kopidev telah berbagi aplikasi secara gratis digithub sebegai referensi untuk para pengembang lainnya.

    Jika kopidev komplain kpd kami, silahkan kami open. Alangkah baiknya, tanyakan kepada team kopidev, bahwa aplikasi yang dibagikan digithub itu disediakan secara free. Sehingga akan banyak para pengembang/dev lainnya juga ikut menggunakannya. Terima kasih.

    Reply

  18. Mas, bagaimana caranya supaya widget nya bisa berubah dark mode atau sebaliknya tanpa setting html. Soalnya saya pakai template LinkMagz jadi kalo template nya diubah ke dark mode widgetnya tidak ikut berubah dan juga sebaliknya kalo widget saya setting dark mode template diubah normal mode juga tidak ikut berubah. Itu bagaimana ya mas solusinya? Mohon bantuannya mas🙏🏻

    Reply

  30. 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?

    Reply

  43. 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??

    Reply

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

      Reply

Leave a Comment