Membuat Efek Loading di Blog

Setiap Blogger pasti ingin membuat blognya lebih baik dan menarik daripada yang lain, animasi berikut akan memberikan efek loading di blog kita, ketika akan berpindah dari halaman yang satu ke yang lain.

Untuk melihat demonya bisa anda lihat di blog ini dengan mengklik link yang ada, dengan menambahkan animasi seperti ini otomatis dapat mengurangi kejenuhan visitor pada saat page tersebut loading.
cara membuat efek loading di blog
effect loading blog

Oke caranya gampang, pertama cari kode </body> ,
kemudian taruh script di bawah ini, tepat diatas </body> tersebut.


<style> #abt-page-loader { position: fixed!important; top: 0; right: 0; bottom: 0; left: 0; z-index: 9999; background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgu_pCwwUV2rTAwqHOe9ny9LlEeO5__EVImxP5j8mp6Un5LcsG4c31qdMRbPUsM63dj9Sb1v23uo-g2CtDMtNcQqjpNU2pDJ_l4e5k7a_bwRyi9WhePirX3stTM7AqxC6XxMRO-zFWWQkI/s200/load6.gif') no-repeat 50% 30%; color: #FFF; display: none; font: 0/0 a; text-shadow: none; padding: 1em 1.2em; } </style> <script type='text/javascript'> //<![CDATA[ $(document.body).append('<div id="abt-page-loader">Loading...</div>'); $(window).on("beforeunload", function() { // ... Show the Animation `.fadeIn()` $('#abt-page-loader').fadeIn(1000).delay(6000).fadeOut(1000); }); //]]> </script>

Semoga bermanfaat :). Jangan lupa untuk memberikan komentar...


*Jika anda merasa artikel ini bermanfaat mohon berbagi dengan yang lain, terimakasih :)

0 komentar: