Membuat Loading Sffect Jam Pada Blogspot

Cara Membuat Loading Dengan Efect Jam di Blog- Kali ini saya akan berbagi tutorial tentang membuat loading dengan efect jam di blog, karena banyak yang lupa waktu hehehe jadi cocok ini buat yang suka lupa waktu, baiklah simak saja langsung caranya :

1.Login ke Blogger
2.Masuk Dashboard > Pilih Template > Klik Edit HTML
3.Masukkan kode dibawah ini dan letakkan di atas kode </head>

<style>  #clockdate-full { position:fixed!important;top:0px;left:0px;width:100%;height:100%;background:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-xXbFI75djYCL0J5XVwOQFLFTiXR40hMq_38CUm1sVbB4VOKAo8iLz1yD-mocyMoGRDDmdCKmaOLAbHGEUXZq73wpitSNEiTWGguRcLDrYZuno_8y4X4ZKudwQMA_fW11z4TTIdTdNzxo/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; } </style>

4.Kemudian masukkan kode dibawah ini dan letakkan diatas </body>

<script> //<![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);

5.Simpan template dan lihat hasilnya

Sekian tutorial saya tentang Cara Membuat Loading Dengan Efect Jam di Blog