Posted by Aak
Aak-share.com Updated at: 4:56:00 PM

Cara Membuat Efek Animasi Page Loading di Blogger

5 comments:
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 diharapkan tidak memberatkan, yang terlihat kesan dari page loading ini seperti memberatkan waktu perpindahan page. Dengan menggunakan efek animasi page loading ini tidak akan 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 sendiri, kemudian menguploudnya lalu anda terapkan. Setelah semuanya selesai di terapkan lalu simpan template dan lihat hasilnya.


Efek Animasi Loading Page .Gif

Inilah adalah beberapa efek animasi loading page yang saya ambil dari salah satu web penyedia ajax loading page, silahkan Anda pilih salah satunya dibawah ini :



http://3.bp.blogspot.com/-KuPPWeIiKEk/VA16pu4vxVI/AAAAAAAADY4/DORC4PejW6k/s1600/loading1%2B(1).gif




http://1.bp.blogspot.com/-yw93SfO7HUg/VA16kPJrEMI/AAAAAAAADX0/zA_AYKGrLpk/s1600/Loading1.GIF



http://3.bp.blogspot.com/-7ijf80PfNiE/VA16qe_bMvI/AAAAAAAADZI/UOFV0ortsc8/s1600/loading2%2B(1).gif



http://4.bp.blogspot.com/-RNEaIW8mfwM/VA16kh4jw_I/AAAAAAAADYA/8BzQLvaNjXs/s1600/Loading2.GIF



http://4.bp.blogspot.com/-Swt685lt6ys/VA16rHry5eI/AAAAAAAADZY/IpcXMen9Baw/s1600/loading3%2B(1).gif



http://3.bp.blogspot.com/-eOUGOXRvaAw/VA16rbVNP0I/AAAAAAAADZQ/7vyE8vSu9oE/s1600/loading7%2B(1).gif



http://3.bp.blogspot.com/-RGDTwjwFAfI/VA16nTy73yI/AAAAAAAADYY/2Q_bv6PSZpk/s1600/Loading6.GIF



http://1.bp.blogspot.com/-GbiMJDnzg6Y/VA16nNujPAI/AAAAAAAADYU/-8FLWN8gGX0/s1600/Loading5.GIF



http://4.bp.blogspot.com/-oXnJb-Hf8yg/VA16mCcCwtI/AAAAAAAADYM/L-6mkDGWBd8/s1600/Loading4.GIF



http://1.bp.blogspot.com/-IiLv-ImK560/VA16kvSVJQI/AAAAAAAADX4/4iEBuCyqSQY/s1600/Loading3.GIF




http://3.bp.blogspot.com/-uQAf8glZH6U/VA16o7gn9SI/AAAAAAAADYs/MiVYc4q4VYw/s1600/Loading8.GIF



http://2.bp.blogspot.com/-gPwCiVWVA0E/VA16sbLarKI/AAAAAAAADZg/53_r4Hiy0Bo/s1600/loading9%2B(1).gif



http://4.bp.blogspot.com/-39XJmVYPlVw/VA16p37GXCI/AAAAAAAADZA/josfLBxhobs/s1600/loading10.gif

http://2.bp.blogspot.com/-EPaWBo-HO5Y/VA16pR-LyzI/AAAAAAAADYw/9J60a2EkJlI/s1600/Loading9.GIF


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, semoga bermanfaat.
Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

5 comments

Thanks gan,
Terimakasih sudah berkunjung .

Balas

masih belum bisa ya gan....kalo misalnya buat yang langsung sekali pasang bisa gak ya?

Balas