Wednesday, 17 June 2015

Cara Mudah Membuat Widget Hitung Mundur di Blog



Cara Mudah Membuat Widget Hitung Mundur di Blog - Tidak terasa sebentar lagi kita akan memasuki bulan yang penuh berkah yaitu Bulan Suci Ramadhan. Temen temen puasanya jangan sampai ada yang batal ya, semangat! Untuk memperingati hari hari seperti Bulan Suci Ramadhan para Blogger biasanya berkreasi dengan membuat  Widget Hitung Mundur / Countdown pada Blognya. Tujuan dibuatnya widget ini sendiri adalah untuk mengingatkan ke Pengunjung Blog kita tentang hari hari penting.  

Langkah Langkah Membuat Widget Hitung Mundur


  • Masuk Blogger ► Tata Letak ► Tambah Gadget ► HTML / Javascript 
  • 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, tapi bagi anak blogger yang bisa utik" sendiri pasti bisa dong 

  • Lalu letakkan kode tersebut di dalam HTML/Javascript ► Simpan ► dan Tarra, Liat hasilnya!
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.   

bangbil.com adalah sebuah personal blog. Seorang blogger yang masih merangkap sebagai pelajar. Temui aku di Sosial Media :

Berlangganan via Email

Berlangganan artikel terbaru dari blog ini langsung via email.