Berbagi Solusi Mengatasi Masalah

Share Caraku - Cara Membuat Countdown Idul Fitri 1437H


Share Caraku - Puasa masih belum dimulai, masih beberapa bulan lagi, tapi saya sudah membahas tentang lebaran. Sebenarnya bukan Lebarannya yang dibahas tapi membuat Countdownnya untuk menghiasi blog kita akar lebih bervariatif, sebenarnya banyak sekali cara praktis untuk membuat countdown, tinggal kita manfaatkan pihak ke 3 penyedia widget countdown kita bisa memperolehnya secara gratis.

Nah, kali ini Share Caraku akan berbagi cara membuat widget countdown Idul Fitri 1437H. Widget countdown ini adalah widget yang berfungsi sebagai penghitung mundur dari hari ini sampai ke detik-detik menuju hari raya Idul Fitri 2016M. Countdown timer ini lengkap dengan hari, jam, menit bahkan sampai detik-detiknya. seperti yang terlihat dibawah ini :





Lalu bagaimana membuatnya? Sangat simpel dan mudah, yang anda lakukan adalah masuk akun blogger anda lalu tambahkan Gedget, Pilih HTML/Java Script lalu pastekan Script dibawah ini :

<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 06, 2016").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 1437H</span>";   
}, 1000);
//]]>
</script>




Mudah bukan cara pemasangannya? Selain itu juga tidak begitu berat jika diterapkan di blog, sehingga loading blog Anda akan tetap terjaga stabil dari script diatas bisa anda kembangkan untuk membuat countdown event lainnya, bila kesulitan silahkan tinggalkan pesan di komentar. Selamat mencoba


Share :

Facebook Twitter Google+ Lintasme

Related Post:

0 Komentar untuk "Share Caraku - Cara Membuat Countdown Idul Fitri 1437H"

Silahkan Koment Sesuai dengan Artikel

Back To Top