CARA MEMBUAT WIDGET HITUNG MUNDUR UNTUK TAHUN BARU

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.

DEMO

Ini Caranya :

1.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

Warning:

Jika Masih Belum berhasil simpan kode ini di atas </head>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>

Sekian Dan TerimaKasih

• Tweet
• Share
• Share
• Share
• Share

About Me

Masa depan tergantung pada apa yang kita lakukan saat ini (Mahatma Gandhi)

Related Post