Cara Memasang Loading page Dengan Efek Jam dan Tanggal di Blog

Apakah Blog Anda memiliki tampilan biasa-biasa saja, jika iya maka cobalah untuk memasang Loading page dengan efek jam dan tanggal ini.  Loading page ini akan muncul ketika blog kita di refresh (f5), reload, atau saat pengujung mengklik link pada blog Anda, maka secara otomatis loading page dengan efek jam dan tanggal ini akan muncul seketika. Blog Anda akan terlihat cantik dan menarik dimata pengujung, jadi saat pengujung mengeklik link artikel lainnya maka pengujung tidak akan bosan menunggu. Apalagi jika blog Anda sedikit lambat dalam proses loading pasti deh loading page ini akan semakin menarik saja, tapi jika blog Anda proses loadingnya cepat maka efeknya hanya sekilas saja. Memasang loading dengan efek jam ini tidak terlalu memberatkan blog, jadi tunggu apa lagi ikuti tutorialnya berikut ini.

1. Pertama silahkan Anda login dulu ke Blogger
2. Klik Template → Edit HTML
3. Cari kode <./head>  (supaya lebih cepat tekan Ctrl + F lalu masukan dan cari)
4. Kemudian Copy kode CSS dibawah ini, lalu Paste diatas atau sebelum kode </head>

 <style type='text/css'>
#clockdate-full { 
position:fixed!important;top:0px;left:0px;width:100%;height:100%;background:#333
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXeP55smMF0N0qKlCA95-GjJSLgEaextFqUk5cgop6PtqIw5Z-BwpB1MMmwTbwFOBmL1NsfDI-h3GUq_GObwtGuOe_imfGhlll0-Cz3xejin1NqdsTjc0skXc9Z2uoUw_pnUXpbZyZKwXt/s1600/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:#333333; }
#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 #333333;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> 

Perhatian: Anda bisa menganti gambarnya dengan gambar yang di inginkan dengan cara menganti kode url yang berwarna hijau.

5.Lalu cari kode </body>, dan pastekan script dibawah ini diatas / sebelum 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);

// Tanggal Besar

var 
months=["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];var
 
myDays=["Minggu","Senin","Selasa","Rabu","Kamis","Jum&#39;at","Sabtu"];var
 date=new Date();var day=date.getDate();var month=date.getMonth();var 
thisDay=date.getDay(),thisDay=myDays[thisDay];var yy=date.getYear();var 
year=(yy<1000)?yy+1900:yy;document.getElementById("date-large").innerHTML="<b>"+thisDay+"</b>,
 "+day+" "+months[month]+" "+year;

 //]]>

</script> 

6. Kemudian Save / Simpan Templatenya, dan lihat hasilnya.

Bagaimana menarik bukan, saya jamin blog Anda semakin menarik saja, sekian dulu dari Artikel saya jika ada yang ingin Anda tanyakan atau mengalami error silahkan komentar dibawah ini.