Cara Membuat Widget Countdown Timer Di Blog

Countdown timer merupakan penghitungan waktu mundur yang biasanya digunakan menuju waktu atau hari tertentu. Yang kita ketahui biasanya countdown timer atau penghitungan waktu mundur digunakan untuk menyambut Tahun Baru atau tahun-tahun penting lainnya.

Jam pasir


Berhubung saat ini kita masih di dalam suasana Ramadhan (bulan yang penuh berkah) pastinya kita sebagai umat Islam menantikan suatu hari yang dinamakan Hari Raya Idul Fitri. Berhubung dengan judul diatas tentunya bagi seorang blogger yang barangkali sudah mengerti di bidang CSS, HTML, atau Javascript akan melakukan eksperimen untuk membuat widget countdown timer yang akan digunakan untuk lebaran atau tahun baru nanti.

Sebelumnya tutorial ini juga sudah diberikan oleh blog.kangismet.net pada tutorialnya yang berjudul Membuat Countdown Timer Tahun Baru 2015. Nah, karena itu untuk tahun baru 2014 yang waktunya sudah kita lewati. Saya berfikir untuk membuat kembali bagaimana widget tersebut digunakan untuk tahun-tahun berikutnya bahkan untuk hari-hari tertentu sesuai dengan kebutuhan kita. Berawal dari tutorial tersebut lah saya bereksperimen sedikit untuk mengubah javascript yang sudah tertera didalamnya
Berikut Cara Membuat Widget Countdown Timer :

1. Login Akun Blogger
2. Blogger > Tata Letak > Tambahkan Gadget > HTML/Java Script
3. Kemudian Masukan Script berikut :

\<style scoped="" type="text/css">
#waktumundur {
    background:rgba(19, 19, 19, 0.65);
    color:#FFC200;
    font-size:130%;
    text-transform:uppercase;
    text-align:center;
    padding:20px 0;
    font-weight:normal;
    border-radius:5px;
    line-height:1.8em;
    font-family:Trebuchet MS, Verdana, Arial, sans-serif;
}
.digit {color:white}
.judul {color:white}
</style>
<div id="waktumundur">
<span id="countdown"></span>
</div>
<script type='text/javascript'>
//<![CDATA[
var target_date = new Date("Jul 27, 2014").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> <span class=\'judul\'>Idul Fitri 1435H</span>";
}, 1000);
//]]>
</script>

4. Kemudian Save.

Kode Warna Hijau Boleh diganti sesuai keinginan waktu Yang Anda Ingin kan , Sekian dan semoga bermanfaat ..

Author : Muhammad Azhari

ADMIN

Share this

Related Posts