Cara Membuat Countdown Timer 2016 Di Blog - kali ini saya akan membahas tentang cara untuk membuat countdown timer atau hitungan mundur pada blog untuk tahun 2016 ini, sungguh tidak terasa sekali bukan, sepertinya saya baru minggu kemarin bikin blog :o, pas di cek ternyata ane bikin nih blog emang baru 7 desember kemarin hihi, biasanya countdown di gunakan untuk waktu waktu tertentu atau bisa disebut waktu waktu spesial :D, khususnya pada tahun baru :D
Oke, kita akan membuat countdown untuk tahun 2016 sekarang :D, untuk lihat demo sobat bisa melihatnya di bawah ini :
Cara Mudah Membuat Countdown Timer 2016
1. Seperti biasa sobat login dulu ke blog sobat2. Lalu masuk ke Tata Letak > Tambah Gadget > HTML / Javascript
3. Setelah itu masukan kode berikut di dalam kotak yang tadi
<style type="text/css" scoped="scoped">
#tahunbaru2016 {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="tahunbaru2016">
<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, 2016").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> 2016";
}, 1000);
//]]>
</script>
4. Silahkan sobat save dan lihat hasilnya 8-)
Sekian tutorial Cara Membuat Countdown Timer 2016 Di Blog, baca juga cara membuat timestamp blog menjadi seperti facebook.
Bagi sobat yang bingung sobat bisa bertanya di kotak komentar, tidak usah sungkan untuk bertanya :D
0 Komentar
Penulisan markup di komentar