Mungkin Yang Agan Maksud Seperti Ini

Demo

Membuat Loading Jam Pada Blog - Kali ini saya akan share Cara Membuat Loading Jam Pada Blog, Contohnya liat gambar diatas, kalau kurang jelas bisa diklik demo yang ada diatas.

1. Silahan Login dulu ke Blogger Dashboard, kemudian pilih menu Template > Edit HTML
2. Jika sudah masuk ke menu Edit HTML, silahkan Copy kode dibawah ini tepat di atas ]]></b:skin> atau </style> ( untuk memudahkan pencarian silahkan tekan tombol Ctrl + F )
   

 /* CSS Loading Jam Blog Zonayahya */
#clockdate-full { position:fixed!important;top:0px;left:0px;width:100%;height:100%;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUHvAk4Lv0qApKP8Rvcb59yExoYPo2UFfSbc36lGPjrqwXd3Nh1mN0fVnKlFWZyxjbHeJsFYrV0bxEV2czolSqEqXIqQxkxtaHfztaaH3X85kqDC9OIfM5YY9-JqOYRPTRZe41KzsYEHIF/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; }
/* End CSS Loading Jam Blog Zonayahya */ 

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

Kode by : http://www.mantav.net