Langkah - langkah Membuat Efek Animasi Page Loading pada Blog :

• LOG IN ke blog anda di www.blogger.com

• Setelah anda log in maka anda akan di bawa ke dasboard blog, nah di dasboard blog inilah anda harus klik tanda segitiga kebalik (opsi pilihan) lalu pilih TEMPLATE. Untuk lebih detail nya lihat gambar di bawah ini :

Gambar dasboard blog

• Jika anda sudah mengklik template anda maka anda akan di bawa ke halaman HTML dan pilih EDIT HTML Untuk lebih detail nya lihat gambar di bawah ini :

Gambar edit html blog

• Jika anda sudah masuk di dalam kolom halaman html blog lalu cari kode  ]]></b:skin> untuk mempercepat pencarian klik 1x di dalam kotak HTML lalu anda tekan CTRL + F  Nanti akan ada kolom kecil di di pojok kanan atas lalu masukan kode  ]]></b:skin> di kolom tersebut dan tekanENTER pasti langsung dapat kode tersebut. Lalu  Letakan kode CSS di bawah tepat di atas kode ]]></b:skin> :

MASUKAN KODE DI BAWAH INI TEPAT DI ATAS KODE :  ]]></b:skin>

#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background: #000 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh1664OWQFc-nxObqIuwz2lSMvM152J7A72SSSWOwTmutLV2YZFnkzKf1I0EaPh-3byIe1MQcYO7SbyQM4hhwkuJWbceO_gW7nO9OvyIKkgP9Vf4kjwfFA9GJOuhkiOSRLM2sFSWpA8DaY/s1600/loading10.gif") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}

CATATAN PENTING...

Anda bisa saja merubah animasi loading dengan menganti kode gambar yang saya tandai di atas.

• Selanjutnya, silahkan cari kode </body>, biasanya posisinya sebelum kode </html> ya. Cari dengan menekan CTRL+F dan jika sudah ketemu, copas saja script di bawah ini sebelum kode </body> atau tepat di atas kode </body>

MASUKAN KODE DI BAWAH INI TEPAT DI ATAS KODE :  </body>

<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>

Langkah terahir SIMPAN template anda. anda bisa liat DEMO nya di salah satu blog saya lain nya yaitu :KUMPULAN CHORD LAGU TERLENGKAP.

Ini ada beberapa alamat URL gambar animasi loading yang munkin anda sukai :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFmzRUGQD6On5ayg4oRUcy04Zya1sQA-epaVJWI7KWNbsmdBapmlwzKtis3PMJopQPI3haP-rULQ1kmus_d8tvNNugicJlN3Q1xfXbS2-p-sCDmjWPHJi6A4xldNQ3tJr5HJaxNoSZe7gf/
 /loading1.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJWb5Fh1D12OxQYasGhv5hrf2UJbNwp_qPCLPPkrYd7Udie53OBrMSEmNqIXoy3xX5zpes6iWw1-3AcF6HOvtJCMlHCSOd_VpEjxWg23XquE-I7oHmj27bSUPFzzwwoYirRw-cC4aDM2di/s1600/loading3.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP8O9ePHsOo3kQsT6P7q7TL67hOi9VL4ZJGAYCT93M1sAI-zZ5L9I3fxM8rrdhTHGOm151Z2cq5ij1Vh_FOrRZr8mmWd_ZLITBZB_mJl5dKleo24tl_-v1RtjB1byswvefrbaxaMYs9qGj/s1600/loading2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNI15C7CyMkKsgym3IHj41HMH6tJcLHkm2TZYTZ4JKuiAbWRkwcaPn8wrBJdu0Ho2a2dC5qnS7i-Z_JwXsgOtcnF-5dVlocbC2FsU9LkO5co_F3LLIGV0rBE6kdTqR_0_uy6LPCKLox1T2/s1600/loading4.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNPlpmMhxE0Rr03jLXrGyxVQAHbk7gAsbVLZYMVIMUvMdkX0EXT8QCPcn5njGIeGZlA8zNHjTaM1i_kPPprNdqJgsZ1B_ag4xjThcCIbTVW2kBIRbRBTP5hxr3TQAz03MCg-0FOC0RIY3I/s1600/loading5.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjooTsKvxl5UPgfAPk1ZHv5yuGirCDgbdiv7G-oGDk5wsVVFecnUxMt9H3dr319VfHV28BzfRmiKX6-B0K6t1vfgJBOurSy_nys8zAqhuTD9jY7hh5LOSiUXcgK5JowBgwZJZMC0-gWzsJi/s1600/loading6.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjnJ8z4ZBrzXFbtdtufFGK5OFq3xCN0u4cpXN8gjkHpC0RZjbNHlMuNtA_tvNGidgMldfaZNvM74cTyUAsdvb93LG1oLnPQURaGwpzlm9C6PWc4EzNHu0olYEKfSiA6HSUeHDn9BevjRFdF/s1600/loading7.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKFJVlJl-QtdEG2tgffLQrQ9bXnmrY0aN2TXb51qE3JdYxl6r5AILSIORoi_5W26NxJPr3zaKKeUzY1aQzSdHw3h4wOMaE-SHR8h7uZmmIQ6vwZJc6SGL_idbZuLJuemDM0RundBivnV1-/s1600/loading8.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfIQe-_jEb9n-rRhRDarrk11IBcKqUaqd-vawbEDAjjnx_vmYs58D8lCA_9c7Itjy9Xrs_79IAw1aaNVQDhB_XyTZmjylAdix1uY0GI4Z-CMltp4RAj_5je7GyfssJ4VloNbDB8l-_VSrS/s1600/loading9.gif