Pasang Widget Hitung Mundur Tahun Baru 2017 di Blog

Ini adalah artikel kedua dengan topik yang sama dari tulisan saya pada mei, 2015 dengan judul Membuat Countdown Timer Menjelang Tahun Baru 2016 (Hitungan Mundur)

Karena menurut saya widget ini banyak dicari oleh sebagian besar blogger yang peduli terhadap tahun baru, maka saya lakukan repost disini.
HTML
<div id='KS_tahunbaru'>
    <span id='KS_countdown'></span>
</div>
JavaScript
var target_date = new Date("Jan 1, 2017").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 2017 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);
CSS Style
#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}

Setting
Saya rasa tidak perlu pengeditan yang berlebihan terhadap kode-kode yang saya berikan, karena saya sudah menambahkan css untuk lebih mempercantik widget sehingga terlihat lebih keren.

Satu hal yang perlu Anda ketahui bahwa: jika widget ini akan digunakan untuk menyambut tahun baru 2018, silahkan ganti angka 2017 bercetak tebal menjadi angka 2018.


Update 30 Desember 2016

Saya memperbarui script ini untuk membuatnya lebih minimalis dan ringan. Jika sebelumnya menggunakan setInterval, maka yang sekarang tidak. Jadi ini tidak lagi memperbarui setiap detik, namun memperbarui setiap kali pengunjung memuat ulang halaman setelah satu jam lamanya/berganti jam.

Hal ini karena telah dihilangkan seconds_left untuk detik, dan menit. Saya juga menggunakan widget ini sekarang untuk menyambut tahun baru 2017. Juga, info waktu tunggu 2017 akan hilang setelah tepat atau melewati 2017. Ini lebih baik daripada menampilkan minus ketika telah lewat tahun.

Jika ingin menggunakan atau mencoba versi updated, ganti semua Script dengan yang berikut ini:
<script>
var target_date = new Date("Jan 1, 2017").getTime();
var hours;
var KS_countdown = document.getElementById("KS_countdown");
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
    hours = parseInt(seconds_left / 3600);
if (hours < 0) {
KS_countdown.innerHTML = "<h3>Kangsigit segenap Tim Redaksi mengucapkan : Selamat Tahun Baru 2017</h3>";
} else {
  KS_countdown.innerHTML = "<div id='sebelum2017'><span class=\'putih\'>TAHUN BARU menuju 2017 TINGGAL </span> " + hours + " <span class=\'putih\'>jam lagi</span></div><h3>Kangsigit segenap Tim Redaksi mengucapkan : Selamat Tahun Baru 2017</h3>";
}
</script> 

Popular posts from this blog

Ramalan Jodoh dan Pasangan Hidup Menurut Tanggal Lahir

Cara Mudah Ambil Uang di ATM BRI (+gambar)

Cara Mengetahui Hari Kelahiran Weton Jawa - Online