Tampilkan postingan dengan label Covid-19. Tampilkan semua postingan
Tampilkan postingan dengan label Covid-19. Tampilkan semua postingan

cara membuat widget real time Covid19 pada Blogspot

April 17, 2020

Kotakubus. Cara membuat widget Real Time Virus Corona atau Covid-19 baik di Blogger ataupun WordPress cukuplah mudah teman teman .

beginilah cara singkat membuat Widget atau memasukan widget Covid-19 pada Blogspot :

1. buka Teta letak dan Klik Tambahkan widget

2. pilih Html ataupun Javascript 



3. masukan Kode script berikut 


Script kode
<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"></span></p>
</div></div></div>
<style>
.jagocard-body {margin: 0;padding: 15px;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>

5. Tekan Finish dan lihat hasilnya 

cara ini juga dapat di praktekan di Wordpress maupun laman web berbasis HTML dan javascript .

Cukup Mudahkan ? ayo dukung pemerintah untuk stay di rumah aja sambil baca ini blog :)

Bagi temen-temen yang mau buat Laman Covid-19 bisa baca disini 

Cara singkat buat laman Real Time Covid19 di Blogspot

April 17, 2020

Kotakubus. Kali ini saya akan share bagaimana cara menambahkan laman Real Time Covid19, dengan laman ini membantu masyarakat mengetahui jumlah kasus Corona pada saat ini , 

Berikut caranya :

1. Buat laman 

2. Masukan Kode berikut pada laman HTML


<div style="text-align: center;">
<a href="https://3.bp.blogspot.com/-bYaRNLIWF20/Xn6Nqf4BvXI/AAAAAAAAACc/9o4emepbMogOaKWL8ql1bHTJRc6kM5S7gCLcBGAsYHQ/s1600/Untitled-1.jpg" imageanchor="1"><img border="0" data-original-height="112" data-original-width="285" height="126" src="https://3.bp.blogspot.com/-bYaRNLIWF20/Xn6Nqf4BvXI/AAAAAAAAACc/9o4emepbMogOaKWL8ql1bHTJRc6kM5S7gCLcBGAsYHQ/s320/Untitled-1.jpg" width="320" /></a></div>
<div style="text-align: center;">
<iframe scrolling="no" src="https://covid19.ilmucoding.com#page" style="border: none; box-shadow: none; height: 2900px;" width="100%"></iframe></div>


3. Silahkan ganti https://3.bp.blogspot.com/-bYaRNLIWF20/Xn6Nqf4BvXI/AAAAAAAAACc/9o4emepbMogOaKWL8ql1bHTJRc6kM5S7gCLcBGAsYHQ/s1600/Untitled-1.jpg
dengan gambar yang kalian inginkan

4. Publish dan selesai 

Kalian Bisa melihat contohnya pada 

Link Disini