kalongganteng.com - Cara Buat Efek Loading Page Blogger Dengan Javascript Jam | Sebelumnya saya sudah share Cara Buat Postingan Terbaru Berdasarkan Kategori/Label Blog nah, kali ini saya akan share cara membuat efek loading page pada blog dengan javascript jam dan animasi kopi yang tentunya akan mempercantik tampilan blog sobat.

Caranya cukup simpel sobat tinggal copy-paste code CSS dan Javascript dibawah ke edit HTML yang ada diblogger. Jika sobat berhasil nantinya akan tampil seperti screenshot berikut.

Baik langsung saja untuk memulainya silahkan copy-paste code CSS berikut.

1. Copy-paste CSS dibawah tepat di atas /]]></b:skin>

#clockdate-full {
position:fixed!important;
top:0px;
left:0px;
width:100%;
height:100%;
background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiH8SoE8OPgAesSOmpyZvgKFZJmRTJPy_ITONZJEH01ORSRso8IYfu78srdkZrICgnnXgsRYYCbDvF9vwBBe1tb-NjyDVhPR1zmrSJVuCJ9F3nDXqGfXQkZqT5i2XbNv2DEcn91szkRCUm/s90/ajaxloader.gif) no-repeat center 85%;
z-index:+100000;
cursor:default;
display:none;
}
.wrapper-clockdate {
padding:25px;
max-width:600px;
width:100%;
text-align:center;
-webkit-border-radius:3px;
border-radius:3px;
margin:0 auto;
margin-top:15%;
-webkit-box-shadow:inset 0px 0px 10px #222;
box-shadow:inset 0px 0px 10px #222;
-webkit-border-radius:5px;
border-radius:5px;
background-color:#2f2f2f;
}
#clock-large {
font-family:Orbitron, sans-serif;
font-size:60px;
text-shadow:0px 0px 1px #fff;
color:#fff;
}
#clock-large span {
color:#888;
text-shadow:0px 0px 1px #333;
font-size:30px;
position:relative;
top:-27px;left:-10px;
}
#date-large {
letter-spacing:15px;
font-size:14px;
font-family:arial,sans-serif;
color:#fff;
}

2. Langkah ke dua silahkan copy-paste JavaScript dibawah tepat di atas </body> bisa letaknya berada di akhir template.

<script type='text/javascript'>
              //<![CDATA[
    // Animasi Loading
     $(document.body).append('<div id="clockdate-full"><div class="wrapper-clockdate"><div id="clock-large"/><div id="date-large"/></div></div>');
    $(window).on("beforeunload", function() {
        $('#clockdate-full').fadeIn(500).delay(5000).fadeOut(1000);
    });
    // Jam Besar
    function showTime(){var a_p="";var today=new Date();var curr_hour=today.getHours();var curr_minute=today.getMinutes();var curr_second=today.getSeconds();if(curr_hour<12){a_p="<span>AM</span>"}else{a_p="<span>PM</span>"}if(curr_hour==0){curr_hour=12}if(curr_hour>12){curr_hour=curr_hour-12}curr_hour=checkTime(curr_hour);curr_minute=checkTime(curr_minute);curr_second=checkTime(curr_second);document.getElementById("clock-large").innerHTML=curr_hour+" : "+curr_minute+" : "+curr_second+" "+a_p}function checkTime(i){if(i<10){i="0"+i}return i}setInterval(showTime,500);
     //]]>
</script>

3. Simpan template. Silahkan coba unruk membuktikannya.