langkah langkahnya :
1. Masuk ke Edit HTML Blog Kalian
2. Copy kode css berikut diatas kode ]]></bskin>
#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background: #303030 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC7VFi3DaiEgpFwM5vVI7pI5arFbrIgtx9bX1CI2V2LKXTBwwrbybMHJrN26eeP_5yMgZtPK-hMG095QbYT6ODRJeIsNZlRwh2PAGtAC7QHxbJN1n4v0iXGDlHs9XujSsm_eDQkLCH277A/s320/load+labeltutorial.gif") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}
Info :
1. Kode Background: #303030 = bisa anda ganti dengan warna yang anda
sukai jika anda tidak paham akan kode warna HTML bisa cek menggunakan
tools kode warna
disini
2. Kode yang berwarna merah bisa anda isikan dengan URL gambar
gif/animasi milik anda sendiri atau anda bisa gunakan gambar yang diatas
nah jika anda tidak bisa membuat gif sendiri anda bisa menggunakan
tools di website dibawah ini:
www.loadinfo.net
www.preloaders.net
www.ajaxload.info
nah kalo udah dapet gambar animasi atau gambar gif sendiri sekarang masuk ke langkah yang ketiga
3. Copy kode dibawah ini di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
// Menyisipkan markup tabir animasi
$(document.body).append('<div id="page-loader"></div>');
// Saat halaman aktif terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
// ... tampilkan tabir animasi dengan efek `.fadeIn()`
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
4. Save Template kamu dan lihat hasilnya . hehe mudah mudahan berhasil ya
sumber http://www.labeltutorial.com/2013/11/cara-membuat-efek-loading-pada-blog.html
