Cara Membuat Loading Jam Pada Blog ~ Tutorial Bangsat

Mungkin Yang Agan Maksud Seperti Ini

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.

Silahan Login dulu ke Blogger Dashboard, kemudian pilih menu Template > Edit HTML
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(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; }
/* End CSS Loading Jam Blog Zonayahya */

3. Kemudian agan Copy kode Javascript di bawah ini kemudian taru diatas kode </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>

4. Simpan Template.

Semoga Bermanfaat Salam Blogger. .

Terima Kasih telah membaca artikel tentang Cara Membuat Loading Jam Pada Blog . Silahkan baca artikel lainnya di daftar isi.

Unknown

Judul : Cara Membuat Loading Jam Pada Blog .
Ditulis oleh : Unknown .
Pada hari : Tuesday 12 August 2014 .
Rating Blog : 5 dari 5

Follow me on: Facebook | Twitter | Google+

Cara Membuat Loading Jam Pada Blog

Related Post