Selasa, 30 Desember 2014

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

Membuat Countdown Timer Sederhana

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, Anda 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 Anda

<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 Anda 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;


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

Membuat Countdown Timer Sederhana Rating: 4.5 Diposkan Oleh: ana sriwahyuni

16 komentar:

  1. Keren Mbak. Kira kira membuat lambat loading blog tidak mbak?

    BalasHapus
    Balasan
    1. asal jangan ditambahin semen saya kira nggak akan berat mas

      Hapus
    2. Bukan semen mas, tapi tronton.. :P

      Hapus
    3. wkakakaka semen + batu koral sekalian Mas Yanto

      Hapus
    4. Koperasi Lestari @ gak berak kok mas, buktinya blog ini... :)

      Hapus
  2. kayaknya countdown ini akan cocok nanti digunakan menjelang tahun baru yambak.
    keren nih hasilnya

    BalasHapus
    Balasan
    1. silahkan mas Yanto kalau mau dipasang :)

      Hapus
  3. pas banget buat ntar malem, sambil ngeblog bisa ngitung mundur

    BalasHapus
    Balasan
    1. heheee... yuk mulai dari sekarang mas.. 3.... 2... 1....

      Hapus
  4. Balasan
    1. silahkan mas Ojik..
      makasih banyak ya... :)

      Hapus
  5. wah, pas banget ni momen nya dengan tahun baru Mbak

    BalasHapus
  6. iya mas Arie.. silahkan kalau mau dipasang mas...

    BalasHapus
  7. cocok banget mbak digunain buat menghitung mundur hal penting di hidup kita.. terima kasih mbak... izin nyoba...

    BalasHapus
  8. Wah bole juga di aplikasikan nih

    BalasHapus
  9. lihat kodenya lumayan puyeng hehe, nanti dipraktekin yah.. trims

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia