Cara Membuat Widget Status dan Update Virus Corona Maupun Covid-19 di Blog

Hai apa kabar semuanya kali ini saya mau berbagi tips seputar blogging yaitu Cara Membuat Widget Status dan Update Virus Corona Maupun Covid-19 di Blog yang dimana untuk memasang widget ini sangatlah mudah sekali dan sangat gampang sekali yang dimana tujuan penggunaan Widget ini tidak lain sebagai salah satu bentuk kita untuk saling memberitahukan sesama warga khususnya warga Indonesia dan umumnya untuk seluruh warga yang ada di dunia, yang di mana Widget ini memiliki tampilan yang cantik dan tentunya tidak akan membosankan dan Selain itu Anda juga bisa memberitahuan kepada pengunjung blog anda tentang Bagaimana perkembangan virus Corona ini.

Untuk memasang widget ini sebenarnya caranya cukup banyak sekali akan tetapi di sini saya akan menjelaskan nya untuk memasang widget ini pada bagian halaman posting maupun Anda bisa memasangnya di halaman statis page, untuk itu Apabila Anda membutuhkan scriptnya nanti akan kami berikan secara gratis dan cuma-cuma dan jangan lupa untuk berlangganan email di situs kami agar anda mendapatkan update artikel yang terbaru dan mudah-mudahan untuk kedepannya web ini bisa pulih kembali dari masa-masa keterpurukannya karena website ini sebelumnya mengalami deindeks total karena ada beberapa orang yang sengaja mencuri artikel kami dan ada beberapa orang yang sengaja menjatuhkan halaman artikel-artikel kami di mesin pencari khususnya Google.

Dan untuk memulihkan website yang terkena masalah seperti terkena berbagai macam algoritma khususnya algoritma Google tentu saja tidaklah mudah maka secara perlahan-lahan kami mulai bangun kembali website ini dengan tujuan agar secara pelan-pelan bisa pulih kembali seperti dulu kala.

Cara Membuat Widget Status dan Update Virus Corona di Blog

Bagi Anda yang ingin memasang widget update virus Corona maupun covid-19 ini anda bisa memasangnya pada halaman artikel maupun pada halaman statis maupun Anda bisa memasangnya di sidebar bagian kanan maupun di atas maupun Anda bisa memasangnya di bagian footer di bawah dan semua itu tergantung Anda yang ingin memasangnya tetapi jika anda ingin memasangnya pada halaman posting maupun di halaman statis anda bisa mengikuti panduan yang kami sampaikan ini.

Dan berikut adalah script yang harus kamu pasang pada blog Anda maupun website Anda silakan copy paste script dibawah ini:

<style>

:root {

--background-color: white;

--box-color: #ebebeb;

--text-color: #21262c;

--number-font-size: 2.4rem;

--heading-font-size: 1.6rem;

}

body {

background-color: var(--background-color);

margin: 0px;

font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont,

"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif,

"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

text-align: center;

color: var(--text-color);

}

#root {

padding: 1rem;

height: calc(100vh - 2rem);

display: flex;

flex-direction: row;

align-items: center;

}

#root .maincontainer {

width: 100%;

}

.cornflowerblue {

color: cornflowerblue;

}

.orange {

color: #f5a623;

}

.green {

color: #219653;

}

.red {

color: #d8232a;

}

.container {

display: grid;

grid-template-columns: 25% 25% 25% 25%;

margin-bottom: 1.5rem;

}

@media (max-width: 640px) {

.container {

grid-template-columns: 50% 50%;

}

@media (max-width: 480px) {

body {

--number-font-size: 1.2rem;

--heading-font-size: 1.3rem;

}

.box {

margin: 0.2rem !important;

}

.box .label {

font-size: 0.65rem !important;

}

.box {

margin: 1rem;

display: flex;

flex-direction: column;

align-items: center;

padding: 0.7rem;

background-color: var(--box-color);

border-radius: 6px;

margin-bottom: 0.3rem;

}

.box .number {

font-family: "IBM Plex Mono", monospace;

font-size: var(--number-font-size);

}

.box .label {

font-size: 0.8rem;

text-align: center;

}

</style>

<h2>Update Data COVID-19 di Indonesia</h2>

<span class="label">Terkonfirmasi</span>

</div>

<span class="label">Dirawat</span>

</div>

<span class="label">Sembuh</span>

</div>

<span class="label">Meninggal</span>

</div>

<span class="info">Sumber data : Kementerian Kesehatan & JHU. Update terakhir :</span>

Script Powered By: <a href="//oto.riffatstore.com/" target="_blank" title="Riffat Jaya Motor">

Riffat Jaya Motor

</a>

</span>

</div>

const monthNames = [

"Januari",

"Februari",

"Maret",

"April",

"Mei",

"Juni",

"Juli",

"Agustus",

"September",

"Oktober",

"November",

"Desember",

];

function numberWithCommas(x) {

return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");

}

const getData = async function () {

let doFetch = await fetch("https://romantic-knuth-c6ede9.netlify.app/.netlify/functions/corona", {

method: "GET",

});

let result = await doFetch.json();

result.filter((data) => {

document.getElementById("confirmed").innerText = numberWithCommas(

data.positif

);

document.getElementById("recovered").innerText = numberWithCommas(

data.sembuh

);

document.getElementById("deceased").innerText = numberWithCommas(

data.meninggal

);

document.getElementById("activeCare").innerText = numberWithCommas(

data.dirawat

);

let _date = new Date();

_date.setHours(_date.getHours() - 3);

document.getElementById(

"metadataDate"

).innerText = `${_date.getUTCDate()} ${

monthNames[_date.getMonth()]

} ${_date.getFullYear()} ${_date.getHours()}:${_date.getMinutes()}:${_date.getSeconds()}`;

return true;

});

};

getData();

</script>

Kemudian silakan Anda buat halaman postingan baru atau Anda bisa memasangnya di halaman statis setelah terbuka silakan pilih mode HTML untuk contohnya bisa anda perhatikan pada gambar di bawah aja.

Cara Memasang Widget Statistik Update Virus Corona di Website

Itulah beberapa poin yang sangat singkat yang bisa kami sampaikan Karena pada dasarnya saya hanya ingin membagikan script tentang update dari virus Corona ini maupun dari update covid-19 ini Jadi pada dasarnya saya tidak perlu banyak basa-basi.

Sekian dulu apa yang bisa kami sampaikan tentang panduan dan tutorial Cara Membuat Widget Status dan Update Virus Corona Maupun Covid-19 di Blog semoga bermanfaat dan atas kunjungannya saya ucapkan terima kasih dan selamat berakhir pekan dan selamat melanjutkan aktivitasnya kembali dan salam blogger.

Blog MR

Cara Membuat Widget Status dan Update Virus Corona Maupun Covid-19 di Blog

Related Posts