Cara Membuat Efek Animasi Page Loading di Blog

Posted By Unknown »

Friday, March 3, 2017

Cara Membuat Efek Animasi Page Loading di Blog Keren - Efek animasi pada blog ini merupakan suatu efek page loading yang terbaru namun sangat sederhana sekali, tetapi animasi page loading di blog ini sangat keren sekali dengan efek-efek animasi loading yang begitu menarik dan banyak pilihan efek loadingnya. Banyak sekali website yang menyediakan ajax loading page untuk blog, dan saya juga akan membagikan beberapa efek animasi loading page yang saya ambil dari salah satu web penyedia ajax animasi page loading.

Untuk membuat efek animasi page loading di blog kita hanya menggunakan sebuah CSS dan jQuery agar bisa menjadi sebuah efek animasi page loading di blog. Dengan menggunakan efek animasi page loading ini tidak akan terlalu memberatkan Loading Blog Anda, sehingga Anda tidak perlu khawatir dengan penggunaan efek animasi page loading pada blog Anda.

Untuk itu blog Saya akan membagikan sebuah tutorial membuat animasi loading pada blog terbaru 2017, dengan memberikan efek animasi loading maka akan terlihat begitu indah dan keren ketika Anda atau pengunjung blog sedang berada pada blog Anda lalu berpindah halaman maka efek animasi loading page ini akan terlihat bagus. Baiklah langsung saja bagi Anda yang ingin membuat atau menambahkan efek animasi loading page di blog terbaru silahkan baca tutorialnya dibawah ini :

Cara Membuat Efek Loading di Blog Keren 
1. Pertama pastinya masuk dulu ke blogger anda
2. Lalu kemudian masuk ke menu template ~>> Edit HTML
3. Cari kode ]]></b:skin> atau </style> ~>> gunakan CTRL+F untuk cepat mencari nya
4. Setelah itu Copy kode css di bawah ini, lalu paste diatas kode ]]</b:skin> atau di atas kode </style>

/* Loading Page */
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url(&#39;http://fc04.deviantart.net/fs70/f/2013/094/8/d/loading_logofinal_by_zegerdon-d60eb1v.gif&#39;) no-repeat 50% 50%;padding:1em 1.2em;display:none}

5.Copy kode jQuery dibawah ini, lalu Paste diatas kode </body>

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

6. Langkah terakhir klik Simpan Template

Catatan : kode yang berwarna merah di atas adalah gambar loadingnya

- Anda bisa mengganti efek animasi loading dengan mengunjungi website inihttp://preloaders.net.

- Anda juga bisa mengganti efek animasi loading yang sudah saya siapkan di bawah ini.

Kumpulan Efek Animasi Loading Page .Gif

Inilah beberapa efek ajax animasi loading page yang saya ambil dari google, silahkan bisa Anda pilih dibawah ini atau anda bisa langsung cari saja di google dengan kata kunci Loading atau apalah sesuka sobat saja, tapi menurut saya udah bagusan yang saya pilih di bawah ini :

http://originalpeople.org/wp-content/plugins/no-spam-at-all/img/loading.gif

http://tributi.regione.calabria.it/sigetri-portlet/resources/img/loading.gif

 https://www.alumni.polimi.it/img/loading.gif

http://www.funclipcard.com/Images/framely.gif

http://fc03.deviantart.net/fs71/f/2013/003/6/9/partart_loading_boredoom_6_by_g2k2007-d5q8zyt.gif

http://fc04.deviantart.net/fs70/f/2013/094/8/d/loading_logofinal_by_zegerdon-d60eb1v.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpeY2Knvt8u0sJmD4EBD0WaDLaPa0Y6rtuHpnG8M-hCbW66sKBuAGPA-T19iQVKgZXR0SZWEO0jihiF10D6YLCi1gEeSsmnZkXuhoymv3i_f1qG-pMNY0VUY9zhZC-WeGM_3hVetV9oGs/s128-no/Loading1.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKAhHikY7rewMriFpP-lc3tQQuwXjj392ZItF86ZsTb0bYeRIZwNJA_IXK5pKiNO8jFI8Oz71LMzoWLJOENnhSypZl-l7uILrxj1kbF5KeZL5lcDfCqwWATd3tEOS9l-KbYmx0t6YSaeY/s128-no/Loading2.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPbPdmlr3W1RlGQIHPqSKj419DzGfE6kQk1DVnwQ2CLJ02GuWW4JdNqkSDMfDBl0AgjensH0POPaRw2mHCuutLUUftn_6g3-Py2De8bqd01Q0NIXCpthyN5ys4YviJPCqmhxE691zEpqY/s128-no/Loading3.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7YNj6OAW7DE3n1xv2Y1FBMk-aJvU5iZoL89PP98Sk2RsmGtu6WOj4JjHLUILwcle2ojLWPE9d4a7ISs5PFosfpNWBzPe_lxVQGtNzqGQbm9cf4bHFmf2XzxWx0qiYQeornu5jVdB3V58/s128-no/Loading4.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZwwPQsaciajbZzNJMnhnab47QNID1JbOivN3GrOBRtFu7SGDIIUXwGEHPL0f9MpKDw7wTkSLGty8ccFSC8TKC7Mf0TvxMT20J_VINEKhEoPzpHrwqKVFzZfjrKME5QZFI_C0ubgVZ3bw/w124-h128-no/Loading5.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjz44ahPLSizb-tZX7RP-DzNeoXl7Z9LNgzao1IVtlsy6FSTxTn3eNe45JgAcQahCc5tvxfRIBZ_CoblZjjs_0HUdAmpLeew2n2iQGEfNY7hiKFLaSs7PtQfKph4TmhSf7Z0nHq5Kw-cw/s128-no/Loading6.GIF

 

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBa5l1O2OZKwXEch21lpUm61B-Nel24a2k-QAD9xo6MSwApUPDFou5w2ihXa3tECgZy5AlRvJU91WRuEGkfZQ9tAgNlsjSYNxSBNzVt9flnmK7BiZNhzAHXwKfQ8tNZ8dX0jh2iD-kcQw/s128-no/Loading7.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3ntjC2bkamqmoAkm3apt8iIOzU9gJ-cCk2baD4IJb3KH8OK8AoOgnvXa3LRD6qWQjx1n_UkScvq5VFUlbyClkbfgr7X7ZtzSJ_iTCVBK1u7JZyzMlflHIUsqT3FzCTtIMpM0gHDwBVxo/w128-h54-no/Loading8.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvPoPHB6Hc2yhsnpeO3x1rnSr9EQi3pz6ap4jigzkDwLWkzC1FV-zYBFuiXa8lBAVbS0FLc-pmxKU70eJ8GkJssKVAhocnEikMFovYb4Qdklxmi2fUJEIISYij44BCu5A_4msORtzPLzM/s128-no/Loading9.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi62_o0bM6OoguS1EQ9gAMBT3wQQYuWpFK9iX4MvIAdvx-85cvQHANAGqoiVviiieGLUcFJRxhtg0YwzV2KlOk4oB70qHCUt-qqOdl0EIy6HjRLvwwVq4cHsaGBq1QPhFGpBYML9jTpqWI/w128-h40-no/Loading10.GIF

Oke menurut kalian cukup mudah bukan untuk menambahkan efek loading nya ke blog sobat ? Sekian artikel mengenai Cara Membuat Efek Animasi Page Loading di Blog. Kurang lebihnya mohon maaf. jangan lupa berkomentar ya sobbat ^_^ . Semoga artikel saya ini sangat bermanfaat bagi sobat dan terima kasih sudah membaca artikel saya ini, jika ada pertanyaan langsung saja berkomentar di bawah ini dan Pelajari juga artikel terkait lainnya di bawah ini