Cara Membuat Widget HItung Mundur Untuk Tahun Baru

Cara Membuat Widget Hitung Mundur Untuk Tahun Baru Pada Blog - Menjelang Tahun Baru biasanya hal yang paling ditunggu-tunggu yaitu saat kita menghitung mundur waktu menjelang Tahun baru, detik demi detik kita menghitung waktu hingga akhirnya sampai pada puncak waktu peringatan tahun baru itu hadir , nah biasanya kita menghitung mundurnya melalui televesi atau jam di gedung atau pusat tertentu , ya fungsinya tidak lain sebagai mengingatkan detik detik menjelang tahun baru , nah bagaimana jika menampilkan hitung mundur atau countdown ini di blog ? nah berikut adalah tutorial Cara Membuat Widget Hitung Mundur Untuk Tahun Baru Pada Blog.

Untuk Demo Lihat Gambar nya aja ya sob :D , yang tulisan warna biru nya itu gerak waktu nya

Gambar Demo Widget

Copy Kode berikut pada Widget Blog sobat:

Tata Letak - Tambahkan gadget - HTML/JavaScript - lalu Paste Kode berikut :

<style type="text/css" scoped="scoped">
#tahunbaru2014 {background:black;color:#5CAAFF;font-family:Oswald, Arial, Sans-serif;font-size:20px;text-transform:uppercase;text-align:center;padding:10px 0;font-weight:normal;}
  .teks {color:white}
</style>
<div id="tahunbaru2014">
<span id="countdown"></span>
</div>
<script type='text/javascript'>
//<![CDATA[
// set the date we're counting down to
var target_date = new Date("Jan 1, 2014").getTime();
// variables for time units
var days, hours, minutes, seconds;
// get tag element
var countdown = document.getElementById("countdown");
// update the tag with id "countdown" every 1 second
setInterval(function () {
    // find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;
    // do some time calculations
    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);
 
    // format countdown string + set tag value
  countdown.innerHTML = days + " <span class=\'teks\'>hari</span> " + hours + " <span class=\'teks\'>jam</span> "
  + minutes + " <span class=\'teks\'>menit</span> " + seconds + " <span class=\'teks\'>detik menuju Tahun</span> 2014";

}, 1000);
//]]>
</script>

Info :

1. new Date("Jan 1, 2014").getTime(); Ganti Tanggal Sesuai dengan Tahun Sekarang
2. Untuk Warna Dan Style Saya rasa sudah pada bisa semua hehe jadi sesuaikan saja dengan kreasi sobat

Nah Widget ini khusus untuk Menyambut tahun baru 2014 kalo tahun 2015 ya tinggal ganti style aja hehe , oke sekian tutorialnya salam labeltutorialcom dan selamat tahun baru 2014 ya sob semoga sobat semua bisa mencapai impian impian ditahun 2014 thanks happy blogging.


Pustaka  : http://stackoverflow.com/questions/18856963/set-time-count-down-timer-jquery