Cara Memasang Widget Status Covid-19 Pada Blog

Cara Memasang Widget Status Covid-19 Pada Blog

Tipsbermakna.xyz - Dunia sedang dihebohkan oleh virus corona atau Covid-19, Eitts tapi kita gaboleh panik tetap tenang ikuti kebijakan yang sudah dibuat pemerintah, agar kalian terhindar dari Virus Covid-19.

Dikarnakan kemaren banyak yang meminta tutor memasang widget status Covid-19 di Blog, Oke kali ini saya buatkan tutorialnya.

Sebelum masuk tutorialnya, Pastinya ada yang bertanya apa sih kegunaan memasang widget statistik Covid-19 di blog?

Jawabannya simple agar pengunjung tau data-data pasien yang terjangkit Covid-19, Data ini valid dari Kawalcorona.

Yaps langsung masuk tutorialnya saja

Cara Memasang Widget Status Covid-19 Pada Blog

  1. Login ke akun blogger anda
  2. Pilih menu Tata Letak > Add a Gadget > Pilih HTML/Javascript
  3. Setelah itu Copy Paste Kode dibawah ini di Widget anda
<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); $("#sembuh").html(result[0].sembuh); $("#meninggal").html(result[0].meninggal); }}); }); </script> <div class="jagoorange jagoshadow img-card"> <div class="jagocard-body"> <div class="d-flex"> <div class="jagologoindo"> <img src="https://kawalcorona.com/uploads/indonesia-PZq.png" width="50" height="50" alt="Positif"> </div> <p class="jagocountry">COVID-19 INDONESIA</p> <p class="jagocorona"><b> <span id='terjangkit' class="jagopositif"></span></b> POSITIF, <b><span id='sembuh' class="jagosembuh"></span></b> SEMBUH, <br/><b><span id='meninggal' class="jagomeninggal"></span></b> MENINGGAL</p> <p class="jagoupdate">Update Hari ini: <span id="date"></p> </div></div></div> <style> .jagocard-body {margin: 0;padding: 20px;position: relative;} .jagoshadow{box-shadow: 0 5px 10px rgba(19, 191, 166, 0.3) !important;} .img-card:before {content: '';position: absolute;background: url(https://kawalcorona.com/data/images/svgs/circle.svg);background-position: top right;background-repeat: no-repeat;width: 100%;height: 100%;opacity: 0.8;right:0px;top:0px} .jagologoindo {float: right;position: relative;top: 5px;} .jagoorange {background: #1589E3;color: #fff !important;} .jagocountry{font-size:30px;margin:0px !important} .jagocorona{padding:5px 0px;margin:0px !important;line-height:30px} .jagoupdate{font-size:20px;margin:0px !important} .jagopositif{padding:5px 7px 5px 5px;background: #f82649!important;} .jagosembuh{padding:5px 7px 5px 5px;background: #09ad95!important;} .jagomeninggal{padding:5px 7px 5px 5px;background: #d43f8d !important;} </style>
4. Publikasikan

Untuk Demo Kalian bisa lihat pada bagian atas blog ini
Sangat mudah bukan? sekian tutornya dari saya.

No comments for "Cara Memasang Widget Status Covid-19 Pada Blog"

Berlangganan via Email