Cara Mudah Membuat Widget Hitung Mundur di Blog

Cara Mudah Membuat Widget Hitung Mundur di Blog - Gakerasa ya sebentar lagi kita bakalan memasuki bulan yang penuh berkah ini.. Bulan Suci Ramadhan. Puasanya diniatin ya gays jangan ampe ada yang bolong bolong semangat! Semangat ngumpulin Exp di Event Bulan Ramadhan ini maksudnya yaa.. dengan beribadah tentunya bukan Game doang yang punya Exp :p .Pada tutorial kali ini gua mau ngebahas dikit nih tentang Widget Hitung Mundur / Countdown tentunya dengan HTML/Javascript (yaiyalah dengan HTML/Javascript judulnya aja uda keliatan "Widget"-_-)

Tujuan dari widget ini sendiri adalah untuk ngingetin ke Pengunjung Blog kita tentang hari hari penting..

Demo

• Pertama harus punya Blog dolo dong kallo kaga punya blog, widgetnya mau ditaro dimana dong? di jidat ente? ehehe #Justkidding
• Masuk Blogger > Tata Letak > Tambah Gadget > HTML / Javascript 
• Copy kode dibawah ini : 

<style type="text/css" scoped="scoped">
#bulanramadhan2015 {background:black;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 sendiri
- 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, tapi bagi anak blogger yang bisa utik" sendiri pasti bisa dong 

• Lalu Pastekan di dalam HTML/Javascript tadi > Simpan deh > Tarra! Liat hasilnya!

Gimana? gampang toh? cuma copy paste doang sama edit dikit :p ehehehh.. semoga bermanfaat yo gays tutorialnya! dan satu lagi Selamat menjalankan ibadah puasa :) jangan lupa COMMENT, SUBSCRIBE, LIKE, SHARE! 

Tweet