Cara Mudah Membuat Widget Hitung Mundur di Blog



Cara Mudah Membuat Widget Hitung Mundur di Blog

Cara Mudah Membuat Widget Hitung Mundur di BlogTidak terasa sebentar lagi kita akan memasuki bulan yang penuh berkah yaitu Bulan Suci Ramadhan. 

Nah untuk memperingati hari hari seperti Bulan Suci Ramadhan ini para Blogger biasanya berkreasi dengan membuat maupun memasang Widget Hitung Mundur / Countdown  ini pada Blognya. Tujuan dibuatnya widget ini selain untuk mempercantik blog adalah untuk mengingatkan ke Pengunjung Blog kita tentang hari hari Penting. Berikut ini adalah cara memasang countdown timer dengan kode html.


Langkah Langkah Membuat Widget Hitung Mundur

1. Masuk Blogger ► Tata Letak ► Tambah Gadget ► HTML / Javascript
2. Copy kode dibawah ini.
<style type="text/css" scoped="scoped">
#bulanramadhan2015 {background:;color:#5CAAFF;font-family:Open Sans;font-size:20px;text-transform:uppercase;text-align:center;padding:10px 0;font-weight:normal;}
  .teks {color:white}
</style>
<div id="bulanramadhan2015">
<span id="countdown"></span>
</div>
<script type='text/javascript'>
//<![CDATA[
// set the date we're counting down to
var target_date = new Date("Jun 18, 2015").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 Bulan Suci Ramadhan</span> 2015";

}, 1000);
//]]>
</script> 

Keterangan :
-background:black = Untuk background dari Widget hitung mundur atau bisa diganti Blacknya dengan kode Warna yang lainnya Disini Jadi misal background:#fafafa
-font-family:Open Sans = Untuk Fontnya
-font-size:20px = Ukuran Font
-menuju Bulan Suci Ramadhan 2015 = silahkan ganti kata kata kalian sendiri
-target_date = new Date("Jun 18, 2015") = silahkan ganti "Jun 18, 2015" dengan Target hari yang mau dihitung mundur

Sebenernya banyak lagi kode yang bisa di utak utik biar keliatan tambah cantik widgetnya, tapi bagi anak blogger yang kreatif pasti bisa dong..

3. Lalu letakkan (Paste) kode tersebut di dalam HTML/Javascript ► Simpan 

Gimana? gampang bukan? Tutorial cara mudah membuat widget hitung mundur di Blog, cuma copy paste doang sama edit dikit. Semoga bermanfaat ya buat temen temen Blogger dan pengunjungnya Happy Blogging! dan satu lagi Selamat menjalankan ibadah puasa.   

Menulis dari berbagai pengalaman pribadi, jika bermanfaat bagi kalian silahkan share. Connect With Me..