Cara Membuat Count Down Timer Idul Fitri 2015 Di Blog

Selamat datang agan atau aganwati kali ini saya akan berbagi tips blogging yaitu cara membuat count down timer idul fitri 2015 di blog, count down timer merupakan widget untuk menghitung mundur waktu yang akan ditempuh untuk masuk ke dalam hari raya idul fitri. Nah untuk penampakan dan penerapannya silakan ikuti di bawah ini;

Langkah

1. Login pada blog anda masing-masing,

2. Pada menu dashboard blog, pilih menu tata letak,

3. Lalu pilih tambahkan gadget,

4. Pilih menu HTML / Javascript,

5. Copy script di bawah ini,

 <div id='lebaran'>
<span id='countdown'>
</span></div>
<script type='text/javascript'> 
//<![CDATA[ 
var target_date = new Date("Jul 17, 2015").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'>Idul Fitri 1436 H</span>";
}, 1000);
//]]>
</script> 

6. Paste pada kolom HTML / Javascript tadi,

7. Simpan,

8. Kembali ke menu dashboard, pilih menu template, lalu pilih menu edit html,

9. Setelah itu cari kode </b:skin> dengan cara

Ctrl

+

F

,

10. Copy script di bawah ini,

 #lebaran {
  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;
} 

11. Paste script tersebut tepat di atas kode </b:skin>,

12. Simpan template.

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

Share this