Cara Membuat Countdown Timer Tahun Baru 2017 Keren Di Blog

Selamat datang agan atau aganwati kali ini saya akan berbagi tentang tips blogging yaitu cara membuat widget countdown timer tahun baru 2017 di blog. Tidak terasa waktu cepat berlalu tahun 2016 dilalui dengan sangat singkat, bergantinya ke tahun yang baru dengan suasana yang baru pula. Tahun 2017 semoga menjadi suksesor tahun 2016 yang memberi banyak keberkahan bagi kita semua.



Langsung saja tidak panjang lebar kali ini kita akan belajar memasang countdownt timer tahun baru 2016 yang dapat dipasang di blog anda masing-masing. Widget ini akan menampilkan hitungan waktu untuk menuju ke tahun 2017. Berikut tutorialnya :

Langkah

1. Login pada blog anda masing-masing,

2. Pada menu dashboard pilih menu template, lalu pilih menu edit html,

3. Setelah itu cari kode ]]></b:skin> atau </style> dengan cara

Ctrl

+

F

,

4. Setelah itu copy script di bawah ini lalu paste tepat di atas kode ]]></b:skin> atau </style> tadi,

 #tahun2017 {
  background:none repeat scroll 0% 0% rgba(19,19,19,0.65);
  color:#FFC200;
  font-size:130%;
  text-transform:capitalize;
  text-align:center;
  padding:15px 0;
  font-weight:normal;
  border-radius:5px;
  line-height:1.8em;
  font-family:&
  quot;
  Roboto&
  quot;
  ,Arial;
  margin-bottom:15px;
}

.digit {
  color:white;
}

.juduls {
  color:#FFC200;
} 

Anda dapat menyesuaikan warna yang anda sukai dengan mengganti kode warna html #FFC200 dengan kode warna html yang anda sukai, anda dapat melihat kode warna html disini!

5. Lalu simpan,

6. Setelah itu kembali ke menu dashboard blog, pilih menu tata letak,

7. Pilih menu tambahkan widget lalu pilih menu html/javascript,

8. Setelah itu copy script di bawah ini lalu paste pada kolom html/javascript tersebut,

 <div id='tahun2017'>
<span id='countdown'>
</span></div>
<script type='text/javascript'> 
//<![CDATA[ 
var target_date = new Date("Jan 1, 2017").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 menuju <span class=\'juduls'>Tahun Baru 2017</span>";
}, 1000);
//]]>
</script> 

7. Setelah itu simpan.

Demo

Nah itu saja dari saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar anda, terima kasih.

Share this