Efek Loading Page Blogger dengan JavaScript Jam

Sebelumnya sudah dimuat artikel CSS Animasi Loading Blog. Artikel tersebut memberikan contoh efek page loading atau efek "sedang memuat halaman" untuk menambah cantik tampilan blog. 

Kalau dalam artikel tersebut efek loadingnya murni menggunakan CSS plus JavaScript sedangkan artikel kali ini menggunakan CSS plus JavaScript yang diperkaya gambar (*.gif) dan menampilkan jam, tentu akan lebih cantik.

Bagaimana cara membuatnya? Ikuti langkah-langkah berikut (artikel dibuat sebagai jawaban atas pertanyaan jenong jellek).

Copy-paste CSS berikut di atas /]]></b:skin>

#clockdate-full {
position:fixed!important;
top:0px;
left:0px;
width:100%;
height:100%;
background:#333 url(http://lh5.googleusercontent.com/-7FvgIJc3tfU/U6rOIebp0JI/AAAAAAAAFdQ/cU0C7gra8Hc/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;
}

Setelah itu copy-paste JavaScript berikut dan letakkan di atas </body>

<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>

Simpan template.

Tip. Anda dapat melakukan perubahan dengan mengutak-atik CSS.

Selamat mencoba.