Cara Mudah Membuat Widget Hitung Mundur di Blog, Tidak terasa sebentar lagi kita akan memasuki bulan yang penuh berkah yaitu Bulan Suci Ramadhan.
Nah untuk memperingati hari hari seperti Bulan Suci Ramadhan ini para Blogger biasanya berkreasi dengan membuat maupun memasang Widget Hitung Mundur / Countdown ini pada Blognya. Tujuan dibuatnya widget ini selain untuk mempercantik blog adalah untuk mengingatkan ke Pengunjung Blog kita tentang hari hari Penting. Berikut ini adalah cara memasang countdown timer dengan kode html.
Baca Juga : Cara Membuat Scroll Pada Widget Blog
Langkah Langkah Membuat Widget Hitung Mundur
1. Masuk Blogger ► Tata Letak ► Tambah Gadget ► HTML / Javascript
2. Copy kode dibawah ini.
<style type="text/css" scoped="scoped">
#bulanramadhan2015 {background:;color:#5CAAFF;font-family:Open Sans;font-size:20px;text-transform:uppercase;text-align:center;padding:10px 0;font-weight:normal;}
.teks {color:white}
</style>
<div id="bulanramadhan2015">
<span id="countdown"></span>
</div>
<script type='text/javascript'>
//<![CDATA[
// set the date we're counting down to
var target_date = new Date("Jun 18, 2015").getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second
setInterval(function () {
// find the amount of "seconds" between now and target
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
// do some time calculations
days = parseInt(seconds_left / 86400);
seconds_left = seconds_left % 86400;
hours = parseInt(seconds_left / 3600);
seconds_left = seconds_left % 3600;
minutes = parseInt(seconds_left / 60);
seconds = parseInt(seconds_left % 60);
// format countdown string + set tag value
countdown.innerHTML = days + " <span class='teks'>hari</span> " + hours + " <span class='teks'>jam</span> "
+ minutes + " <span class='teks'>menit</span> " + seconds + " <span class='teks'>detik menuju Bulan Suci Ramadhan</span> 2015";
}, 1000);
//]]>
</script>Keterangan :
-background:black = Untuk background dari Widget hitung mundur atau bisa diganti Blacknya dengan kode Warna yang lainnya Disini Jadi misal background:#fafafa
-font-family:Open Sans = Untuk Fontnya
-font-size:20px = Ukuran Font
-menuju Bulan Suci Ramadhan 2015 = silahkan ganti kata kata kalian sendiri
-target_date = new Date("Jun 18, 2015") = silahkan ganti "Jun 18, 2015" dengan Target hari yang mau dihitung mundur
Sebenernya banyak lagi kode yang bisa di utak utik biar keliatan tambah cantik widgetnya, tapi bagi anak blogger yang kreatif pasti bisa dong..
Gimana? gampang bukan? Tutorial cara mudah membuat widget hitung mundur di Blog, cuma copy paste doang sama edit dikit. Semoga bermanfaat ya buat temen temen Blogger dan pengunjungnya Happy Blogging! dan satu lagi Selamat menjalankan ibadah puasa.