Membuat Widget Countdown Timer

Membuat Widget Countdown Timer - Countdown timer merupakan penghitungan waktu mundur yang biasanya digunakan menuju waktu atau hari tertentu. Yang kita ketahui biasanya countdown timer atau penghitungan waktu mundur digunakan untuk menyambut Tahun Baru atau tahun-tahun penting lainnya.

Tahun baru 2018 tinggal menghitung hari. Sebagai seorang blogger tentunya widget ini juga berguna untuk mempercantik blog kan?

Membuat Widget Countdown Timer

Langsung saja, berikut ini adalah script widget countdown timer untuk Tahun Baru 2018 seperti yang terlihat di sidebar kanan pada blog saya ini.

Jika ingin menggunakannya kamu cukup menambahkan widget baru ini pada HTML/Javascript.

<style scoped="" type="text/css"> #waktumundur {
 background: #31266b;
 color: #fec503;
 font-size: 100%;
 text-transform: uppercase;
 text-align: center;
 padding: 20px 0;
 font-weight: bold;
 border-radius: 5px;
 line-height: 1.8em;
 font-family: Arial, sans-serif;
}
.digit {
 color: white
}
.judul {
 color: white
}
</style>

<div id="waktumundur">
<span id="countdown"></span>
</div>

<script type = 'text/javascript' >
//<![CDATA[
var target_date = new Date("Jan 1, 2018").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> <span class=\'judul\'>Tahun Baru 2018</span>";
}, 1000);
//]]>
</script>

Dari semua script diatas, yang paling berpengaruh atau berperan besar adalah pemakaian Javascriptnya. Karena dengan javascriptnya kita bisa mengatur tanggal yang kita tuju sesuai dengan kemauan kita sendiri. Caranya mudah, cukup mengganti tanggal pada new Date("Jul 27, 2014")  pada javascript diatas.

Sekian artikel tutorial dari saya yaitu Membuat Widget Countdown Timer, semoga bermanfaat untuk kita semua. Jika kamu memiliki permasalahan dalam proses diatas. Saya menyediakan kolom komentar untuk mendiskusikan masalah tersebut. Silahkan mencoba dan bereksperimen.