Cara Membuat Widget Hitung Mundur Tahun Baru

tahun baru 2016 sudah dekat lagi, kali ini mimin mau kasih tau cara membuat countdown / Hitung mundur tahun baru. yang pastinya sangat bagus dan cocok dipakai di blog sobat tersebut. langsung saja deh ke tutorialnya aja ya.


 Cara Membuat Countdown / Widget Hitung Mundur Tahun Baru

1. masuk ke blogger sobat dahulu
2. langsung saja menuju ke Tata letak > Tambahkan Gadget > Pilih HTML/javascript
3. langkah selanjutnya copykan kode dibawah ini.
<style scoped="scoped" type="text/css">
.tb2016{color:#01579b;background: #03a9f4; font-size: 120%;
text-transform: uppercase;text-align: center;margin: 2%;padding: 1.5%;}
.digit {color:#fff}
.judul {color:#fff}
@media screen and (max-width:974px) {
.tb2016{ margin:10px 0 0 0;}}
</style>

<div class="tb2016">
<div id="countdown">
<script type="text/javascript">
//<![CDATA[
var target_date = new Date("Jan 01, 2016").getTime();
var days, hours, minutes, seconds;
var countdown = document.getElementById("countdown");
setInterval(function () {
var current_date = new Date().getTime();
var seconds_left = (target_date - current_date) / 1000;
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);
countdown.innerHTML = days + " <span class=\'digit\'>hari</span> " + hours + " <span class=\'digit\'>jam</span> "
+ minutes + " <span class=\'digit\'>menit</span> " + seconds + " <span class=\'digit\'>detik</span> <span class=\'digit\'>Menuju</span> <span class=\'judul\'>Tahun Baru 2016</span>";
}, 1000);
//]]>
</script></div></div>

Cara Membuat Widget Hitung Mundur Tahun Baru
Tampilan Countdown 

4. Simpan dan lihat hasilnya di blog sobat

Dan kini blog sobat sudah memiliki widget hitung mundur tahun barunya, selamat mencoba ya.


sumber:ferdistyle.xyz

4 comments

  1. Bisa buat countdown nih, tahun baru kan dikit lagi :D

    ReplyDelete
  2. Mantap nih tapi masih lama 4 hari,ntar aja pasangnya :D

    ReplyDelete
  3. wah keren nih ane pasang dulu gan di blog ane

    ReplyDelete
  4. wah bagus nih gan , apakah saat sudah tahun baru widget hitung mundur langsung berbunyi gan ? seperti alarm gitu :v

    ReplyDelete