Cara menambahkan Efek loading pada blogger

assalamualaikum..
post kali in" saya akan berbagi  efek loading pada blogger kita

Cara
Membuat Efek Animasi Page Loading di Blogger
Cara Membuat Efek Animasi Page Loading di Blog - Page loading adalah satu fitur untuk menampilkan efek loading ketika perpindahan page. Dimana pada perpindahan halaman blog akan ditampilkan gambar atau animasi tertentu. Untuk membuat efek animasi page loading tentunya tak luput dari CSS dan jQuery.



Pada dasarnya dengan page loading ini duharapkan tidak memberatkan, yang terlihat kesan dari page loading ini seperti memberatkan waktu perpindahan page. 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.

Efek Animasi Page Loading juga dapat menambah nilai plus pada Blog anda, karena dapat mempercantik dan menarik untuk dilihat. Dalam membuat Page Loading kita perlu mencari code </body> , apabila sudah menemukan anda tambahkan jQuery pada blog sobat. Simpan code di bawah ini sebelum </body> atau tepatnya letakkan tepat diatas </body>


<script type='text/javascript'>
//<![CDATA[
$(document.body).append('<div id="page-loader"></div>');
$(window).on("beforeunload", function() {
$('#page-loader').fadeIn(1000).delay(8000).fadeOut(1000);
});
//]]>
</script>



Penjelasan Script diatas 
Pada body Background disisipkan kode'<div id="page-loader"></div>' 
ketika akan berpindah ke halaman lain page loader ditampilkan dengan efek fadein dengan waktu 1000detik, dilakukan penundaan 8000detik, dan kemudian diakhiri dengan efek fadeout 1000detik.


Setelah kode diatas sudah anda terapkan, kemudian anda cari kode ]]></b:skin> anda letakkan sebelum kode atau tepatnya diatas kode ]]></b:skin>


page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background: #000 url("URL IMAGE") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}



Keterangan :
Background  dapat diganti menyesuaikan kondisi blog sobat.
URL Image adalah tempat menyimpan URL image, apabila anda memiliki kategori gambar sendi anda dapat menguploudnya lalu anda bisa terapkan.
Setelah semuanya anda terapkan maka simpan template dan lihat hasilnya.


Efek Animasi Loading Page .Gif

Inilah adalah beberapa efek ajax animasi loading page untuk blogget anda silah download aja..jangan lupa kunjungi ane lagi
















Gambar diatas hanya beberapa bagian yang saya ambil, apabila anda ingin memiliki banyak pilihan Animasi efek loading.Gif dengan mengunjungi website ini http://preloaders.net.
Sekian tutorial tentang cara membuat efek animasi page loding di Blogger...kunjungi kami lagi...snoga bermamfaat :)

5 komentar:

Unknown said...

kok ane msih gk ngerti ya

MAA said...

NIce artikel gan ;)

Anonymous said...

mantap gan coba dulu ah

Unknown said...

bikin blog menjadi berat keknya

Erenka said...

mantap gan :D btw logo loading bisa diganti dengan gambar kita gak?

Post a Comment

Twitter Delicious Facebook Digg Stumbleupon Favorites More

 
Design by Free WordPress Themes | Bloggerized by Lasantha - Premium Blogger Themes | coupon codes