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 saya akan membagikan sebuah tutorial membuat animasi loading pada blog terbaru 2014, 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. Baiklah langsung saja bagi Anda yang ingin membuat atau menambahkan efek animasi loading page di blog terbaru silahkan baca tutorialnya dibawah ini :
1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode ]]</b:skin> atau </style>
4. Copy kode css dibawah ini, lalu Paste 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/AVvXsEg_WeFVhb53Yy-SxvFcLhRwJrZl1Uxz41vDeoUtKcPYYt4xj6KdQwoghHJwveEgHmwK4riv0cpZDDcnHu5dWW-xKYskdoWNQyFUi2KY2_dzt2ftbbFSbbf2PGUBWLqGBQXCGVQZ9YFDoycL/s128-no/loading.GIF') no-repeat 50% 50%;padding:1em 1.2em;display:none}
5. Cari kode </body>
6. 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>
7. Klik Simpan Template
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/AVvXsEhMyXa6Je7P5x81jSsZSS4xpvIZE5RygjR9C8MLafgpyeJe-1gbSpDokh9lV8Ct6V3_n-kUsqX5Mk-dX8XAV9cEhA62e88Cd3Kjy2uOdlmB4q-JZbqq1XBqMqSqGtKDEsApNX54uGhZOnw/s128-no/Loading1.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEit7N_J8PV4Y82ObN-LUnzlorQpaGJTrX9LVY4CI8U60NO2e3P6c9eVldu5TIvcP5JWygL4Omcl-2MHTqDNISe5o4V5huFs0L5I4rrKOfyM3j7q9GpYLm-xAIVF4LPcvrLdYh-BcN2f1k0/s128-no/Loading2.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Ir0ZwPeVTsi3B46O52EAZaThevP5oITYUirQFqiaSVuIQDZE89JPtVGTDyZLIo01LtNiJ9ITmIxdHyNsQIsN-7gWZEe2ASkPzijZoITStw5qfW7pFBrdHeYtl0v-c5gzi4jga7gUXKc/s128-no/Loading3.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0ROf8u9tkRNzEAFRxmzjXtuoHlZVNd8PLrksDJ2b34B7RPhWIwRJtDCMKva_ueh8b2bIRUrt6ziEtSQtWjWkkBX15-_KCJ3GiMxcjPLx6AsMTEE9VV5HjHk0udvDeGSa5jnJ1yGp9sck/w124-h128-no/Loading5.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6-O8VLcMANqDs_8QCkdxIzySu-ggXyZKlvToQJBDw9X8Bttk3HyynTM5ptLWBdGuKSEEF5Tiwn_KO9UE2GQNgr9nJ4JAQd1cGmUkv-awIQ4poEQRKFS_X5Pde34hWUxtBPiAp517a1rA/w128-h54-no/Loading8.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpD-n8LJh1iYr26tPu8rjiynQ5d6ASCQu1CEtmZ552I84d3KU3xK-tYk8hZ9C3utTsXdBxiGz4Ttijn9Ea_vzqR6XZ080-uI2Y8pThbSejQJFEyPDrBP9Vskm2Np-9_VPOa6YnMJnq01M/s128-no/Loading9.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi8Br83tn7gfbWCdajp9iLtzYdvT4QUscJK6GyT__Xs3GjgFkP9NV33-DkNkDVXagHKMaXI2KaOAGDIB1_V-uk_J9XQBbI-QojPRJC14xB8yRfBG6RAm0AkfHAjCRZrt_2G8x3nuWJ028Q/w128-h40-no/Loading10.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkmjhvc9sP-YDSaxlvbPxWjJSWjMRgsc2hlz6muqRjtxaycNudQa6NVCWmCkwzeZC4JtRYSDlniRWT64E7KvQ9tI1QAn1U5n2BoGkkLoFtWJDkyaQUkQwAgP7IhKoTAenM87ktddZhpQsJ/
/loading1.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsgl6djbUpUGMbWM5IOz0G7O399G4tRPVoQWdbYiTm92rNq7D0f1rQKgYJ-viiU_Ykhgfk7MPZI7gsSLgIq7fV_p6dS9t3CM7XQDoPpB-ppMqvICKZtnJslV0wHkADb5R5YIm6sVml-nMZ/s1600/loading3.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpQDS0U6JfP9-bIsGWKM40xAZ5klBUn8XdFewZYkvN3n7CagumyHmUr4nbYeo7lj5W5jxJnaBy3SI28cf0S6SUDKEhl2JuCNAlYO9mxTOErdZLbP2ONf-v_Nh_8NNGFRGIagvu6BJVUCgi/s1600/loading2.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjwmBB5YaJ4LnyWwgVowwWo9yJRaEw2by5JEGObEgYWb7HjJmZmjQde4wr17B641NG3uGktGXF5TiBBwEkhPw7VoRvvB6jd_Xc4SrTFFliYFIoisO2IsFakzKKB-9b4woGgMhKVqAn4bw_c/s1600/loading4.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6gZxvWOvCE7nrhw0UHfzJaJ-rkLB4q21_bF84uHj1UZD4Gr-Tqvhn_LHZPLfWFJveVmXr0chjIiW4u6cLdtfWJFuYK6VCBHk2H4gAgc4Gg_gpTFKA1ABXIZGqp0DKq8bZqUywER_7AdAB/s1600/loading5.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrOrkbDe7VOtiu4UMntw5hkBRk5NQTDyeKGho9TKh0QEbeny4OJNE3pYp_UNJnhCBz8WDprERqiJ40pkUPNTBOMoLVbioLUm-U_5qlbmKr-yhkj1t_h-7zj1132ekJW5WCk79lfKidha4v/s1600/loading6.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFeVGI4uMWb3LGJgtbxfOHdgte8JTfeN0WNHmieC2vPNX9_25IIufXi9NJAh27ERt_QSoz-2yjkGyQxqbRglmlAKf9q3ogZPMxHb8MEe0eagoonaFatszD4NKcLwE8aea38Td6My6y-mpI/s1600/loading7.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdIlajwyvFmz1TV9euSw_LsFlz9TdAIiX8KGZ5Zj9DmZ85ymC0Yr9sugwzXgkdNprg2JezSRa4xzpIQLWh0z3572GCm0u3E5wGU4RtIr8mtzvCHc9Fa9f816mDuSqKR2z0TpZZ9SLOEadx/s1600/loading8.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj-bV7mDOC3siU1gsU5l4oGwQansgaKm3GnN-t4dXaHAEr9YiPrdB57_9xz_ushgpqQiUy-YHb_2FVBIdnFamaULIgmyWcfuq3nWXO6jkCTc7t2yTuaL52KBOu5hyphenhyphenXGOVrlTeTgfC-p2Gtq/s1600/loading9.gif
0 komentar:
Posting Komentar