Membuat Countdown Timer Sederhana

Membuat Countdown Timer Sederhana - Countdown timer adalah media yang digunakan untuk menghitung waktu secara mundur dan biasa digunakan dalam event penting seperti pergantian tahun baru, batas penjualan dalam yang biasa disebut dengan Countdown Sale. Bentuk countdown sendiri memiliki beragam jenis, mulai dari yang sederhana sampai yang terlihat sangat profesional, mulai dari yang gratisan sampai yang premium

Dan pada artikel ini saya berbgai sebuah countdown timer yang sangat sederhana sekali yang saya ambil dari TamingTheBeast, saking sederhananya untuk memasang countdown ini tidak diperlukan kode CSS, hanya kode script yang perlu dipasang. Meski hanya berupa script, sobat tidak perlu khawatir akan loading blog, skrip ini tidak mempengaruhi loading blog

Jika ingin memasang countdown timer sederhana ini silahkan salin kode berikut diatas atau sebelum kode </body> didalam kode template blog sobat

<script type='text/javascript'>
// This following statement must be left intact.
// Copyright (c) Michael Bloch and Taming The Beast.
// Countdown timer script v1.2 April 20 2009
// Taming the Beast.net - http://www.tamingthebeast.net
// Free Web Marketing and Ecommerce articles and tools
// By using this code you agree to indemnify Taming the Beast
// from from any liability that might arise from its use.
// The preceding statement be left intact.

var present;
var future;
var tseconds;
var seconds;
var minutes;
var hours;
var days;
ID=setTimeout(&quot;countdown();&quot;, 1000);

function countdown()
{
present = new Date();
present = present.getTime() + (60000) + (12 * 60 * 60 * 1000);
future = new Date(&quot;January 01, 2015 23:59:00&quot;);

tseconds = (future - present) / 1000;

days = tseconds /24/60/60;
days = Math.floor(days);
tseconds = tseconds - (days * 24 * 60 * 60);

hours = tseconds /60/60;
hours = Math.floor(hours);
tseconds = tseconds - (hours * 60 * 60);

minutes = tseconds /60;
minutes = Math.floor(minutes);
tseconds = tseconds - (minutes * 60);

seconds = tseconds;
seconds = Math.floor(seconds);

document.getElementById(&#39;days&#39;).innerHTML = days;
document.getElementById(&#39;hours&#39;).innerHTML = hours;
document.getElementById(&#39;minutes&#39;).innerHTML = minutes;
document.getElementById(&#39;seconds&#39;).innerHTML = seconds;
ID=setTimeout(&quot;countdown();&quot;, 1000);
}
</script>

Keterangan: Ganti kode yang berwarna merah sesuai target Tanggal yang diinginkan

Dan tempatkan kode berikut untuk sebagai kode pemanggil dari script countdown timer diatas. Tempatkan dimana saja yang sobat inginkan

<SPAN id="days">0</SPAN> &nbsp;days &nbsp;&nbsp; <SPAN id="hours">0</SPAN> &nbsp;hr.&nbsp;&nbsp; <SPAN id="minutes">0</SPAN>&nbsp;min,&nbsp; <SPAN id="seconds">0</SPAN>&nbsp;sec.&nbsp;

Lihat DEMO Countdown Timer

Sudah melihat demo dari countdown timer sederhana ini? Tertarik untuk memasangnya? Silahkan.. Dan untuk modifikasi lebih lanjut agar tampilannya lebih bagus lagi, bisa sobat tambahkan kode CSS yang sesuai dengan kreatifitas sobat