Widget count down lebaran 2016

Gak terasa ya,lebaran sebentar lagi,ngomong ngomong soal lebaran nih,kali ini gue ada sebuah widget untuk menghitung waktu mundur sebelum lebaran tiba,atau bisa disebut count down timer,widget ini cuma untuk menghiasi blog kamu aja,untuk menyambut lebaran yang sebentar lagi akan tiba

widget ini dengan efek slide,yang akan menghiasi blog kamu

<style type="text/css" scoped="scoped">
#boxslide {
    position: fixed!important;
    top: 165px;
    z-index: 999;
    right: -1000px;
    width: 300px;
    margin: 296px 0 0 -182px;
    height: auto;
    font: normal 12px Arial,Sans-Serif;
    padding: 8px 10px 20px 10px;
    line-height: 1em;
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
#boxslide a.close{position:absolute;bottom:0;left:0;background-color:transparant;font:normal bold 20px Arial,Sans-Serif;text-decoration:none;line-height:22px;width:22px;text-align:center;color:#444;transform:rotate(0);cursor:pointer}
#boxslide a.close:hover{transform:rotate(360deg);color:#efb16f;}
#lebaran {
    background: white;
    color: #0dc135;
    font-family: Oswald, Arial, Sans-serif;
    font-size: 15px;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 0;
    font-weight: normal;
    border: #0dc135 solid 1px;
    height: 128px;
}
  .teks {color:#0dc135}
</style>
<div id='boxslide'>
<div id="lebaran">
<span id="countdown"></span>
  <br/>
<img class="" height="62" itemprop="image" src="http://orig11.deviantart.net/0a8e/f/2009/356/1/5/sungkem_kaskus_emoticon_by_pakto.gif" width="62"></img>
</div>
    <a class='close' href='#'>x</a>
</div>
<script type='text/javascript'>
//<![CDATA[
// set the date we're counting down to
var target_date = new Date("Jul 6, 2016").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 Idul fitri</span> 1437 H";

}, 1000);

$(window).bind("load", function() {

    // animasikan nilai top saat halaman telah selesai dimuat
    $('#boxslide').animate({right:"5px"}, 1000);

    // hilangkan kotak pesan saat tombol (x) diklik
    $('a.close').click(function() {
        $(this).parent().fadeOut();
        return false;
    });

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

simpan template kamu dan hilat hasil nya

sekian tutorial kali ini