How To Make Countdown Timer Hari Raya

Countdown | Sudah sangat lama saya belum membuat artikel pada blog ini dikarenakan modem habis pulsa heheh... Pada postingan lalu saya telah memposting sticky widget dan sekarang saya juga membuat artikel tentang widget.

Ok, menuju topik. Pada kali ini saya akan membagika sebuah widget yang berfungsi untuk mempercantik blog saja.

Countdown Timer sendiri memiliki arti Hitung Mundur, jadi widget ini berfungsi sebagai pengitung mundur waktu sampai yang telah ditentukan. Pada widget ini sama sekali tidak memberatkan blog dan Responsive tentunya. Yaudah jangan panjang-lebar..

Berikut Tutorialnya

Langkah 1 : Buat widget baru, kemudian pastekan kode berikut di dalamnya (judul dikosongkan saja) 

<div id='lebaran'>
<span id='countdown'>
</span></div>
<script type='text/javascript'> 
//<![CDATA[ 
var target_date = new Date("Jul 28, 2014").getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById("countdown");
setInterval(function () {
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
    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);
    countdown.innerHTML = days + " <span class=\'digit\'>hari</span> " + hours + " <span class=\'digit\'>jam</span> " + minutes + " <span class=\'digit\'>menit</span> " + seconds + " <span class=\'digit\'>detik menuju <span class=\'juduls'>Idul Fitri 1435 H</span>";
}, 1000);
//]]>
</script>

Langkah 2 : Tambahkan CSS diatas kode </style>

#lebaran {
  background:none repeat scroll 0% 0% rgba(19,19,19,0.65);
  color:#FFC200;
  font-size:130%;
  text-transform:capitalize;
  text-align:center;
  padding:15px 0;
  font-weight:normal;
  border-radius:5px;
  line-height:1.8em;
  font-family:&
  quot;
  Roboto&
  quot;
  ,Arial;
  margin-bottom:15px;
}

.digit {
  color:white;
}

.juduls {
  color:#FFC200;
}

Jika sudah silahkan di lihat sekarang ^_^
Mungkin itu dulu yang dapat saya bagikan.. tunggu tutorial berikutnya :D