membuat animasi loading di blog
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/AVvXsEginaBq5mmHSbUbJfqic7B8s1YIAsGL7GCW9p8Qf1P1OTdu-Oi-6tqoI60SjzOsLUP-fDPxQzOSz0eMUHm2sOPqP9DLip1fZ3y01MKBCrbd4lTLqXHhsnCXkedZaCJ66p7smbC3ldIGexER/s128-no/loading.GIF') no-repeat 50% 50%;padding:1em 1.2em;display:none}</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>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/AVvXsEhvTn7C-UlBArM1BdRUaL8FSh4AbSGZx-hHmz_iWjfXZn45idUaMaiiHo7d2ZVEZiiKChg82nf5iH7ituA1rTFCSa1BN94z80Y7RjJ_GKmWatSQ3CyVgYlryiTO_p4fZ1Sjbqq1oq7M8bg/s128-no/Loading1.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0HgIWxBX23CWtEXpU0l-TkOc6ESn_NwrngiZcmwRSZZp1AQvxejaAcYv2uzHOaLFjx1BCbhReUZG5KP2iRsWjOpwwXDHP-SJPp41UmhE8H_LVvBbh3PcgJQRiacQYtZq1Ao2BEK_P7So/s128-no/Loading2.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpj47aOftaDOyhvvlblqZyKOdGffDNZNu0gJzhAzi5KY8oZlVC0CrbGi6qwFzRQWYbUhuVQMhmY8We50yrs0J8_D9oMLV_Yh4NLOBuLvLaiIK1ZzY6JrX8xqce7lIazE0692ktPHjyqz8/s128-no/Loading3.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQl3P5Ff_9jzE-Hm1Rt_pFuls9UMFGrpOXXwpzJ1NU6Gy2L8a67YjIONTgUIVvTRL_Rnr8h7hoa2CB8_C-P_13edrP1M0WRf4bUO4HjGjjf3jkGHFWsK04taDsBFmGZc5om7JkXy35ysY/s128-no/Loading4.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqctsh_FjZ6wDP3aDSHvR_K1KIGsqZyAypJ4uAzYQETghTLvTBUfy2Y4EboYPbGDmgcGgP9d-OTc1TyBXZqAoSvWpMAZUrnjf2RdnoTNV7uSul1yqapgsLcxws77OXpIYyXWa3QInjGco/w124-h128-no/Loading5.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif_DQJ5lvys5gPCheJpesm_kJkl5pbZkX8SpZx1lgD7y1IlqC3VvCl5hyphenhyphen5b6jlzI3bFhIndqKD9ud3gK_LBu7v9QoYjyJ3OQ2nMhi-_nMcQKGmQLQy8N5F5C0_osv8qIhiTLWEEpBBeNA/s128-no/Loading6.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioZahx-3rtTQcYLSrqrfOQQ1H_nHge66Bh5KVev0ZD-Eti1UJFRud9q1U2dAaSGBfxy8EvS5k9sEONzMY7R2vhHn2mfui7yMoi3vIoVc2RwRxKAc_JT0h0ah7AFs2B_5Lgeu7RNyep9l4/s128-no/Loading7.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPqGWG1Z9Bxdq9DxTRCEy9Kv6ospg9gnFAzhYn3NYDCkFMtsrrbvQrg5nsn44a0RKGs1XJ0GS6ASmAXw6jAePZiDFh-nGo8RfZwOtjaHY0guZPkGLbZILi2tbbflmg41o22tXw5nzV7mQ/w128-h54-no/Loading8.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk-S4oTgaM7dD2X_kbA_L9To8YO316_RO6ynVmHSftXEPRVUMP4Ys7iodMFtTKG3WaGqyN-FMRRc5k6vPAo6Ncrv4EDSi2lfcnxAgOHXPnUHufK9D_ExFMDluTN5YrmmW-nISs14QLHec/s128-no/Loading9.GIF
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0Kt0WjOzUMO4nzaYCCp8PTrGA7a_v1eri0UJ9IGPzrh28t7ohhmoUMppSfVTGgMzGQVTnGNDpUYpAPzLVRtgyDFC4ZarHTzZWp2CAHob98LHlys5ZtKn2gHcsD38H7R5tQFdpTj0Apbo/w128-h40-no/Loading10.GIF
Subscribe to:
Post Comments
(
Atom
)
No comments :
Post a Comment