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.
Oke caranya gampang, pertama cari kode </body> ,
kemudian taruh script di bawah ini, tepat diatas </body> tersebut.
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.
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...
0 komentar: