Cara Membuat Efek Loading di Blogger Keren

Cara Membuat Efek Animasi Page Loading di Blog - Efek animasi pada blog ini adalah suatu efek page loading paling terbaru namun sangat sederhana sekali tetapi elegant, animasi page loading di blog ini termasuk kategori sangat keren sekali dengan efek-efek animasi loading yang terlihat begitu menarik dan juga mempunyai banyak pilihan efek loadingnya. Sebenarnya banyak sekali web yang memberikan ajax loading page untuk blog, begiktu juga dengan saya yang akan memberikan beberapa efek animasi loading page yang saya peroleh dari salah satu web yang menyediakan ajax animasi page loading.

Untuk membuat efek animasi page loading di blog anda hanya menggunakan CSS dan juga jQuery supaya dapat menjadi efek animasi page loading pada blog. Dengan memanfaatkan efek animasi page loading ini tidak berpengaruh memberatkan Loading Blog Anda, sehingga Anda tidak usah was-was di saat menggunakan efek animasi page loading pada blog Anda.

Maka itu saya akan memberikan sebuah tutorial membuat animasi loading pada blog terbaru 2014, dengan efek animasi loading maka akan terlihat menarik, indah dan keren disaat Anda atau pengunjung blog sedang mampir pada blog Anda dan berpindah halaman, maka efek animasi loading page akan terlihat. Silahkan baca tutorialnya dibawah ini :

1. Masuk pada Blogger.com
2. Selanjutnya Klik Template => Edit HTML
3. Cari kode Berikut ]]</b:skin> atau </style>
4. Copy kode css dibawah dan Paste tepat diatas kode ]]</b:skin> atau </style>

/* Loading Page */
#page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWj6x2P0PWt5hZkdQ2F0dAYRVYqDRcDQbkgwaXAz9uDYhGEBMQieSEPd4hVRjaOW1MGoUDgWOYuzZNOthn20tppqJHeozSbgWauXitO_3fK_EyLCeKDSF-NP6toDDaRGOtrQXsRTvykAUr/s128-no/loading.GIF') no-repeat 50% 50%;padding:1em 1.2em;display:none}

5. Lalu Cari kode Ini </body>
6. Copy kode jQuery yang dibawah ini, dan selanjutnya 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>

7. Selanjutnya Klik Simpan Template

NOTIF :
- Anda Juga dapat mengganti efek animasi loading dengan memasuki website ini http://preloaders.net
- Atau Anda juga bisa menggunakan efek loading saya di bawah ini :

Kumpulan Efek Animasi Loading Page .Gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUvuQeNsqxeX2XKc5xhbOCSAveWkXu8dFjts-ldGK_MIJKP-JNe9we-hjrs-dxQ8ZPIolt8EwXPC1U1ejbaKx7oVCB7P2JjkaNcsryyybC2wjd9u8EnKdiZu8LnBzcim9gspAX0pssz28/s128-no/Loading1.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiU4qqvWwZaTWaMrFYtlEh8zoIDusoPHIfH7nT3jJAU4B6FrkKgI9386J3238bzUkKbj03sR3QtNw1nwhyphenhyphenWdlIOCzOZOt3vgUTY5LHlImmtjL3ZrU-ams7NKA-YO6XoYEo2t_VQ5-sYgXc/s128-no/Loading2.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWWtcpjO588hHXMP9OAbxasVW0Vql81f-DaGxsomVJSSDAdp72oT57qC3SEjRe0gzRUH6L-HRNjGNx5GCOYnFH8WnYbwUr6KNRnY51DEoi_1LXbVLe35hJFPRLElpQa-DfiO0N7-fheog/s128-no/Loading3.GIF

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

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX1aDvJIho_FKv-MuBqN4eCrsgLOoKZbp1IPS1m72TX_avmYeJalDRasRvVtuCm5QD8tnoIoqERxF2OkGXygQDBXcWsyqy8YnD_ba63bix8IkCdbMIlMDZ6oCmhIyaknPx-2NeK-RR_KY/w124-h128-no/Loading5.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmV6-oW2rmx0bfq8B3Halye05rA6UIWR0qIVP9ZkBV4bmSEm13ZY9GZs-KjxNF3veKrvashWFnKOpzmE8ps3kLYfswdm-E6tjB4wOIxr_7ANt1NH4zsGy4s8CJDUQvFT27ZCsqzLd7b9g/s128-no/Loading6.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCAkQp8G7H5lUDFAI2Nk4SWigjGOkbGVorSmH1TV59953Pwthelv8NaAmyyekmO7A-lpPK2UvRfw-Z7VQlja6JXYT86c-gXkANCLXvGsW0-WISxQC9iIEUE033WUSQo1P7lIPur0djtNw/s128-no/Loading7.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDoHojyKr8wFqw5MoDpqa5o15SwNd4GpUmP8g6udKoCLvAwBVfJr5vtSxnqk5kDlV7pQC5qq5mYu3Wo2-7TZZ0fxKCgOLXQtq1yrleI4Ax-t7yRbXYXTmL-pgIFbWW5heeZ7NV1UwV010/w128-h54-no/Loading8.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPNpM8oXdfjt5F9CCusFHhoANKwbwm7CaVRnKGxiZ9YtA9tV1x0-1-yv6ComMsS7_g2PQS6DLNFMjDCA1pKQYRW90mYZYAopSimQwqAg_YKLHurPbFZz6wQY-p8GUhJm7U2wFcJVDUyUk/s128-no/Loading9.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnjAD-L8SBx4TqhesTZlhE9htaUEoFMXe5QZ6iZ1H1WQH5VnosD0pvqN8GGhNtBdHzxx9ltTqn7SdD7lIiaj_AIl4JO5vV5UdLhCZMPpZ5-u_jeAkcMWss9Ainyd8va5yWrIns2JxRFSs/w128-h40-no/Loading10.GIF

Sekian artikel saya mengenai Cara Membuat Animasi Loading Keren di Blog. Semoga bermanfaat.

0

Shares