Langkah-langkah Pembuatan Loading di blog :
Langkah-1 : Login Blogger, Klik menu Template > Edit HTML
Langkah-2 : Simpan kode external jQuery library di bawah ini, tepat sebelum tag </head> :
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
Kode jQuery library hanya bisa di pasang 1x saja, jika sobat sudah memasang kode jQuery library lewati langkah ini, karena akan mengakibatkan konflik / semua kode jQuery tidak akan berfungsi.
Langkah-3 : Copy kode CSS di bawah ini, setelah itu paste tepat sebelum tag </head> :
<style>
/* LOADING HALAMAN */
#loadingHalaman {
background:url(http://bart-ingredients.co.uk/wp-content/themes/food-recipes-child/images/ajax-loader.gif) no-repeat center;
background-color:rgba(0, 0, 0, 0.32);
width:100%;height:100%;
position: fixed; left: 0px; top:0px; z-index: +100000;
}
</style>
Langkah-4 : Copy kode HTML di bawah ini, setelah itu paste tepat setelah tag <body> :
<div id="loadingHalaman"></div>
Langkah-5 : Setelah itu simpan kode jQuery di bawah ini tepat sebelum tag </body> :
<script>Langkah-6 : Simpan Template
//<![CDATA[
//Loading Halaman
$(window).bind("load", function() {
$('#loadingHalaman').slideUp(1000);
});
//]]>
</script>
Catatan :
- Anda bisa mengganti efek animasi loading dengan mengunjungi website ini http://preloaders.net.
- Anda juga bisa mengganti efek animasi loading yang sudah saya siapkan dibawah.
Kumpulan Efek Animasi Loading Page .Gif
Inilah beberapa efek ajax animasi loading page yang saya ambil dari
salah satu web penyedia ajax loading page, silahkan bisa Anda pilih
dibawah ini :
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfKyq2jVzRQJR1TTIwJv1opXnL4XsHAwL54hBh8Q5oNSBo0mtT2oK4HAqgjgF32V3KwLSMQkDRmtXBsZqR5RflY8GctJuUcI6wrROTP-3wq0-qjSnT6BgQ0Ple9bgHd5IE2PcBnYxJMzw/s128-no/Loading1.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3BWXTv5lyB5loVY20-w7YObQokl_9c6Qngt-hZR6ZHwzBkY04PUwZF2NDQGWeTz5tG-IVF2_aYRMD0c-qDE2_P4nDmlmk0NlVtO3_kij1JPd2ke4-4aLw0sYhNeuJm5dLqxhlB05NT1Y/s128-no/Loading2.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiaLwGMDf_dafsYPiRSid6iISSeVvckDilmoRMRdgOhBQl6VeMtkP4I3yv5D6qmhyphenhyphenuKd9ux9GpSHIS5SnPKO-ISZ68NMxRkIFjQOi7AR9d45sHGJxuHSKNanTjB0ry87Q0lc5lZaxoGQm8/s128-no/Loading3.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS6Dr4svujNo3LtM6zGoiWQwo9T-aae9lozMz7cN411rjGqWjR81hB5TpPVBIT6YCb31azZHlwg7ogm0S50IMI5RHK1vgPpGh-GaFyM1PjacZT9-e60dEOWmJz6UC2nNiN1UuN21pf1W8/s128-no/Loading4.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXBc-R_3BG-IgyCOEvpgrqq0EvJ_xIsgQjQlGvX42wH1HYX68ryCgtXc7t3vo67J0R3MC_5FCyX70ZCstowz60MV8jEfXy-GFJaHC8xdKqJmWAXjuy5FNmt0EgMZ3Wl517k867q8EPnTY/w124-h128-no/Loading5.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLIWOxn3sPxTGJBiRpWRBHA7Esy93JvR0SzRYCLSSe0wq9PIiPPlfwPvIaNtNDIwKvsc2nD5eUwOKAL7hfN88KAt6PLWIYptlpP9pMGSfppoYnSnm4QXb8Ktaym2zzfcRewJdaRZy9U0M/s128-no/Loading6.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0_1LdClBW8KVWgifzsuksZH_IXmgGngIa2gu5-xGycElCQ3QnIxVSpBICHRs88BLQ8xfoFQwaPt5Z4_IEUrrf5m1JwqMSJLS4WJZ-BtGohKKc2KS7GtissdnfhiU9tbJxox8STgNYqi0/s128-no/Loading7.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTT8UvXp6anoMKCw4norDIcmcfBSIggwsshel50JIGCdMlpQV8hDR3MAhjcrjI_ibhPwfS_f357TryIFAL0nHyRZ8WuJdZgOSsdnd8s4FjIodGphCLNAeEB1L0rRuBcagGm_m79jDOmHs/w128-h54-no/Loading8.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiifGToe3gP4hQ2LB7DPF2Hvvi38onavvXOKmbdD_pA4E3wWO-XKCwliVZSIn4at5Zp2f8d2EINx5rLSjgo_MQ6mTCOkNBCUF1bRcGkr3wz7EGQFSNlqbIqCFJuQkN6nigrmVyjZJ1pNuw/s128-no/Loading9.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR_XArrIkMsfr5mkFn45dwL1n-OqAVPdDfhSrPOs7Ob47HDBYwF3KZGMOkGx5VvEB3wl0MpmSRr49McTKIAqpRIYMdI2NyySo2zAJn21ZC7exvaYobdv2C9xF81ADulZy9BlZFwtI3S2I/w128-h40-no/Loading10.GIF
Kurang lebihnya mohon maaf.
Semoga Bermanfaat...
bagaimana? mudah bukan? ^_^
Ref : http://www.ficripebriyana.com/2014/07/cara-membuat-efek-animasi-page-loading-di-blog.html