Membuat Countdown Timer Menjelang Tahun Baru 2016 (Hitungan Mundur)

Setelah jalan-jalan di blognya kang ismet, saya tertarik dengan salah satu postnya yang menyajikan widget simpel namun keren untuk disisipkan dalam blog guna mempercantik dan melengkapi biar terlihat lebih profesional dimata para pengunjung.

Meski tahun baru 2016 masih lama, namun saya tidak ingin terlalu lama menyimpan widget ini pada komputer saya, takutnya nanti malah kelupaan.

Apa maksud dari judul postingan saya kali ini?

Sangat simpel, widget ini akan mulai menghitung mundur mulai dari tanggal yang telah Anda tentukan. Silahkan baca dulu cara menerapkan sebelum copas kode.

Disini saya setting untuk menyambut tahun baru 2016, jika masih ingin digunakan untuk tahun 2017, maka edit saja bagian tahun pada script dibawah ini.

Sebelumnya, silahkan lihat dulu contohnya pada bagian bawah

Nah, kode-kodenya sangat simpel, silahkan copy semua kode berikut dalam blog Anda
<style type="text/css" scoped>
#KS_tahunbaru {
    background:#739bc8;
    color:yellow;
    font-size:150%;
    text-transform:uppercase;
    text-align:center;
    padding:20px 0;
    font-weight:normal;
    border-radius:5px;
    line-height:1.8em;
}
.putih {color:#fff}
</style>
<div id='KS_tahunbaru'>
    <span id='KS_countdown'></span>
</div>

<script type="text/javascript">
var target_date = new Date("Jan 1, 2016").getTime();
var days, hours, minutes, seconds;
var KS_countdown = document.getElementById("KS_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);
  KS_countdown.innerHTML = "<span class=\'putih\'>TAHUN BARU menuju 2016 TINGGAL </span>" + days + " <span class=\'putih\'>hari,</span> " + hours + " <span class=\'putih\'>jam,</span> "
  + minutes + " <span class=\'putih\'>menit,</span> " + seconds + " <span class=\'putih\'>detik lagi</span>";
}, 1000);
</script>
Jika widget ingin digunakan menyambut tahun 2017, maka ganti angka 2016 bercetak tebal biru diatas dengan angka 2017.
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini