Cara Membuat Efek Animasi Page Loading

Cara Membuat Efek Animasi Page Loading di Blog - Halo rekan blogger, bagaimana kabarnya? kalau mimin lagi bete huuh. Tapi sekarang walaupun mimin lagi bete, akan tetep sharing tutorial di Blogger Max. Nah, apa anda tahu animasi page loading? animasi page loading berguna untuk meperhias blog agar lebih mempesona dan cantik, yaaa kalau pengunjung anda membuka sesuatu dari blog anda, maka akan munculah sosok loading yang keren berupa animasi. Nah, sekarang juga saya akan sharing cara membuat animasi loading di blog tersebut untuk anda.

Selain itu, efek loading yang dipasang di blog anda tidak akan memperlambat kinerja blog. Nah, sekarang anda tidak perlu khawatir lagi untuk memasang efek animasi loading di blog ini. Untuk membuatnya tidak sulit karena kita hanya perlu menambahkan CSS dan Jquery saja ya.  baiklah untuk itu sekarang kita mulai saja untuk cara memasang efek animasi loading di blog, karena terlalu banyak ngetik saya pun pasti lelah, Check it out.

1. Masuk ke blogger masing-masing.
2. Lalu, ke Templete > Edit HTML.
3. Cari kode ]]></b:skin>, setelah ketemu masukan kode dibawah ini tepat diatas kode tersebut.

/* Page Loading Blogger Max */
#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/AVvXsEiTLqjcuH0z84aSwluWUDxCHCFwOe1r25bpIJRr01DR6oZPCStaG5Wd6D-MgBBqFKRIzZCA8s_K2O_R1nLKmlMKvL1Wq47igVaUlR1H7Pe2xjRBGru-LR5O5UWKWoeRhuBlHwH5ao9gt1fz/s128-no/loading.GIF')
 no-repeat 50% 50%;padding:1em 1.2em;display:none}

NOTE : Ganti Kode yang Berwarna Merah Tua dengan url animasi dipaling bawah, silahkan.

4. Jika sudah terterap kode css diatas, sekarang anda cari kode </body>.
5. Jika sudah ketemu kode tersebut, masukan kembali script Jquery dibawah ini tepat diatasnya.

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

6. Klik Simpan Templete dan Lihat Hasilnya,

Kumpulan Animasi Loading .GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiVZ0LPQfFlMjgae0KDIRFrwTefzmRKv01BZ_jgpXitrqNg_HvWKOKSjgEBnPIJjsFN6F_BHra6su00Dx0dctdKRr1gA50Bxp17qmAYqF1PKlQOr250VwewnLMsMF6EYvinbMrjy-OiH_e/s1600/loading+2.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLM9BZWC8DoRZQaqO1pv13oxrYe621rp79rC2tgp4sGEethuKU97CSLQuKyB0YPNIYFQUX19MvwkXCf_ZNKMQ9l_TLMPANKPyMVgB5I7R_5aO7yifHL04IOVeBiZ35-qDiS2netZLlv5_H/s1600/loading+3.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ZvzTfacXWswy_UD04wdqy03FCJ1gBVB03rtrYBv2ZnnBHxSpPX2duY9En8j-krCTt9dXfWS8RGpJARkzk-vblC8w939A6kE_zVRTN0-YIUUcTfp9DAxjTBbVAF3ESxTi7W_eQxC9cXW_/s1600/loading+8.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3H0LyEHnUqQXae1c6jfxQoKpSOJs3z3ajWMDAP2pdrw8l35jgyLZ5Zgcyw0mbxAVU7OTljggKjh8y2I4YSklFNWfoBeelrwsQFcQaJFqG95tebGVkSenoWNRtYaXkTUvgTNT8MvAufFWA/s200/loading+6.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNABwU7bqKErg2fLUmgO0pxLJNuyvVvVud-4vH2v-kpqU51TM8DKIb_NSPuL-zraSnI4Cq58m-Or16Ize0epw0VGFwWIpCsfROBAe-d7ssNvr6Y1ipKQ8QPVzsoTsRGA0m4GC89kR-PgtZ/s1600/loading+1.GIF

 https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpAIx7qREA2GwvkQgyxJ92sIrT8p_13yO-yoBLUAnXnsXIC6AUul17e5oqlAdvuqOrJ2LTM8GeH-WkU5321jwH9RHP9Vu-p4Ntn4hPiUCh36LkZYkOsDKWDtkdE5ZuzbnQpF6q3qIC37S-/s1600/loading+7.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9XDu-6ParXRvMuol-_Y8IVlIAY2WeEV8v8itacoVMaQzszWNE31OGcitKelDsHPpbCxFwdeQlpZZ7QOl7fc7U41rA1_tZu-3zL2OML5NDmoiz3a5D0GClInCDht6ldnCS1lXgDCJb6GWU/s1600/loading+4.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3hjU56CZj_i7Y_jq2lqCaZGDvHjZn-IBjsCXx7nA230eaEvgnzIl5Jh_j1cARZvd_q9FOZR8AtQHAiyzo62TgVa6PgRVBD9Msqdij2OJEhYKdQhmxPUGmkGG8OtEWdDdytpXwJFc3xQLe/s1600/loading+5.GIF

* Gambar diatas saya ambil dari http://preloaders.net

Nah, bagaimana? apakah anda tertarik untuk mencobanya? tunggu apa lagi yuk coba. Terimakasih juga telah berkunjung diblog sederhana saya ini, semoga bisa bermanfaat tentang artikel saya kali ini yang bertema cara membuat loading di blog, semoga bermanfaat. Dan jangan lupa juga selalu tinggalkan jejak sebelum beranjak pergi.

Share this post

Get new articles via email: