6 Cara Membuat Efek Animasi Page Loading keren di Blog

Cara membuat efek Loading di Blog.
 Ok sobat, tutorial  kali ini tentang Cara Membuat Efek Animasi Page Loading keren di Blog Blogger. Mungkinsobat mempunyai alasan tersendiri untuk Membuat Efek Loading Pada Blog, misalnya adalah untuk mempercantik tampilan Blog, atau membuat terkesan pengunjung Blog anda karena lebih terlihat keren.

Berbicara soal emenghias blog saya sudah banyak membahas tentang menghias blog. Beberapa Blogger tidak memasang efek loading seperti ini karena walaupun loading blog kita ringan tapi akan memiliki kesan yang berat di mata pengunjung, tapi tidak apa untuk anda yang ingin tampil "cantik", hehehe. Ok sobat berikut ini adalah cara memasang efek loading ke template Blogger anda.

Langkah 1 : Tambahkan jQuery pada blog sobat. Simpan kode di bawah ini sebelum </head> dan Apabila template sobat sudah memiliki jQuery seperti dibawah ini, lewati saja langkah pertama ini. karena tidak boleh ada script jQuery lebih dari satu.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/> 

Langkah 2 : Tambahkan CSS. Simpan CSS ini di atas ]]></b:skin>

#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:#000 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRXhEbOlKT9M_iYKap2u1Zy9EVQScp8Ue_9DhEpD6Er6TnkvD8my-rySAFUsBx7wLHvtg6_c9fAE2UYR3LTsDESDDHISJrMahwCzSRX08m2mu2OfW2-Z2lGJDl67emPMdqwpm4_I34gjo/s200/load6.gif') no-repeat 50% 50%;
color:white;
padding:1em 1.2em;
display:none;
}

Langkah 3 : Tambahkan JavaScript. Tambahkan kode JavaScript ini di atas </body>

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

Kode berwarna biru diatas adalah gambar animasi yang akan ditampilkan waktu loading, sobat dapat menggantinnya dengan gambar sobat atau pilih beberapa gambar animasi efek loading blog dibawah ini.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlJSmH5yDYly-gyJPp75MacIbKupUYaX_NHtHw4TGGlpE_vcKQzXmf6_3ZPBU9QxoFAGZD5yVpLcgKlhPZRdeb-x-Sos5hRQ5-1FrW_OJFLD4414FJ5Vix_yHUouf_baDnKS-KHQ8LD2oW/s1600/loading1.gif




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNuAxamSNB7t6lxzTZgWdjK4wHC3lL2G82OWqYjW49P-OG3ZElLqADZe9jb5a1kS5CVFuRwBWQwfNEv3Jt1HX4ioMDQD4ZVXs37Dwz3-AB6g30Ut6-WF4AFFTt63MDjYUkEAoY06z97tAh/s1600/loading2.gif



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSrNhyphenhyphenW_7RSd9oy0oea8_RtMu3wFZPmRt6MopDtRZ_CG3Bxi23rrN4JVkTZ4P1BM4q1PXeFdKddCPPlZhoAJ4BmlsBy-IcK9HPo4hNxK37aDJjJknZ2i-E807Cstq3b9up_cbWAzUeoT7x/s1600/loading3.gif



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIE8oAG7zsnwQbBoufYrQs1NmWX4f-5V-No6y4NtTgxzJR3Wu6jk1EtAEuR9oLIJuGqAMhwZLFv5Ns_yY_mRnJoebEelSlsKvSnHMd4DQEg_gIdzbTmZlK9fLvdHWCAaO7ZztRp18GPadc/s1600/loading4.gif



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNfnZMWGA47adD2lHC9iUZBHzAUkehA3-_6hCuingCdSbg6tf00L31weaqOonZms8ckSvpM7BkJozJvdFIfo_eVHWKY6h0sRv4ss8QXYHT3O-RarbdBei0phJQ4cPo58QgRDfpf6vtFAb5/s1600/loading5.gif




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhZ0FGpl3Mr9r0eqTsXQGjZOzVkhbm6E6VJNIVHXEiy8o4Yunm2-_vq8A5pULMo08Iogy7sL5QeltJ1KJBDHDCrSypU9vArFreOA2JWB5UKv1pCwXXqbVNNcD3jQgz9BdOFxSkYbENfejv/s1600/loading6.gif



https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3g9Z8Z5_Oi06ZlyFStpg7Kv9FWeCaTpfnI4-9OujdGMihxc0fpe-RUiYE7g8W-_Pi7umt7kWqBMz9OHWA-h9j4YwLUJ0Hc3r2sjzWCXuCdNp98rkkSco1lYe2QLNHR31HWdgb0VRmnCOd/s1600/loading7.gif




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWkZfxvXsFIik9kb9wHVUnxBV7et_rHvZzAjQXdC4WoJMA4jFwl1IjoWyhyC7yXDXLDAgG0rwoZgl7XV0zZuTKCZHwVwvziOpcm9O1jat4vn-uZvwH7XtYGsbeXnxari0iRaaCeYyFjny4/s1600/loading8.gif




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ETPAKD36PuaiU_qbhrzi_FqbD81Tz_jEKJFY61JRKREAlYLXSmZOPz7I1R8nkCInMQLH3j-0esTDEFhXahHt4LInXl6bECpp6KfKf1JGWTzrxJ9IBxlCDL4dimzS2BIhsKxUjtxznus_/s1600/loading9.gif




https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgL5boWPZNTcjUm1i11Ss9lFwIUYZdv_v8M_6K72nvP685-l75ef8x6bdzMzCm9aKDQivYy2jBWopu-GTee0g9VJeREfPK1qtXDM9b7Y6xc6K_hofB9nrMi1hDkGC6Sc_WBJtKsy_OosO89/s1600/loading10.gif

Nah sekian tutorial arofi untuk saat ini semoga bermanfaat dan semoga efek loading blog ini dapat mempercantik tampilan blog sobat 

Artikel Terkait :