Widget Countdown Lebaran 2016

MurliCyber    6/27/2016    Blogger , Tutorial    Comment   

Gak terasa ya,lebaran sebentar lagi,ngomong ngomong soal lebaran nih, kali ini saya 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 hehe

widget ini dengan efek slide,yang akan menghiasi blog kamu

Cara memasang nya

1. Login ke blogger

2. Pilih tata letak,kemudian pilih widget Html/javascript

3. Letakkan kode di bawah ini di dalam widget tadi

<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 lihat hasil nya

Sekian tutorial sederhama kali ini.