Cara Mudah Membuat Efek Loading Yang Keren Pada Blog

Yo, yo sobat Save As,, ketemu lagi di Artikel Berlabel Tips Trik Blogger ,, yup sobat kali ini blog Save As akan membahas bagaimana Cara Membuat Efek Loading Yang sangat keren di blog :) Jika kalian membuka Blog ini pasti akan muncul efek loading kan saat akan membuka label / postingan lainnya?.. nah itu lah yang disebut dengan Efek Loading.. 

nah Pasti terlihat keren dan indah kan Sobat Save As.. Lalu Sobat Save As Bertanya-tanya dalam hati .. "Hmmm... gimana cara buat kaya gitu ya,..." nah.. ini dia cara-caranya sobat Save As !:

• Masuk ke Dasbor Blogger
• Pilih Template
• Klik Edit HTML
• Cari Kode ]]></b:skin> ataupun </style> (search dengan CTRL + F agar lebih cepat ketemu :D ) 
• Taruh Kode CSS dibawah diatas kode ]]></b:skin> atau </style> di template Blog Sobat

Ini Scriptnya:

/* Loading Page */ #page-loader{position:fixed!important;position:absolute;top:0;right:0;bottom:0;left:0;z-index:999999;background:#fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiKsHkfwyfvIw-gCSRfSWitAKod-0yjTFIOiQOatFHyOTC1gH8J9J6j-8w0rx25PRBKi5Ex-tdxtKMvKETHmt4PmwOdNzcVF5AjYw8IboffJJxjnJZtvlp_ZNFS8fOyD6cDVe2TVrXEbwK/s128-no/loading.GIF') no-repeat 50% 50%;padding:1em 1.2em;display:none} Catatan : Sobat bisa mengganti kode berwarna merah dengan URL Gambar Loader lainnya..

• Setelah ditaruh.. cari lagi kode </body> di template blog sobat (pakai CTRL + F),, setelah itu masukkan Script Jquery Berikut

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

Setelah ditaruh.. Klik Simpan Template,, selesai sob..

Bila Sobat ingin gambar Loader lainnya,, pergilah ke prealoders.net

Atau ambil salah satu punya saya ini :

http://2.bp.blogspot.com/-kIrasdB82T0/U6eA_bnDmlI/AAAAAAAADzw/UUio00Tw4gM/s1600/Loader2.gif

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj80lbyhRrGXI-DHgYfRJL9Cr0wh8DPwM5GTqoceSAqVUs3ezVCLFwrUfL0lfUvcBX4wY9MJM7-BUq5gDZB_EuiLr9dteu1mU47gqK2CJNXm0rzJ6j_hIf2sRjp39WaiQTsFsylqaMFYiE/s128-no/Loading2.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQw6K1Z2jL23QCLTwCBSgZVSCiuXXtZ8U2ckLzd425bnB1DKweRbfWfVTisAj3cmh4wssb3_9o9-eI70wkh8juEhTBPRYGxJODT1IDyK0O8mkwbVWoiVyHIPBz4J2nkyu0TG0mDlmsRzA/s128-no/Loading3.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjG4KDaRFVdMC6mMCJEF5bEvovX5Eb_hchcN7txdw2tPZcQRDioY5-krVgL6Ga_ypNI2FnHX9fzIuLD0qrYJd6eYZxbuhI1ATN-I8x87WOgvoqXwEp2r35YuwnB1QUZnTE0iMfYH7EeBK4/s128-no/Loading1.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyiCScRyrzF2qHP7rjzSiHxJkZWksDhrP8tNpNGDqZVwGPPHegxit0UJ9asO2hxENUkz_jU5cl_VlAYcLzbZeveERgdWh51NuKYUTwYGXRH5owTmp0GBKk01NS0WlBSv-jTSxRtI8YyJc/w124-h128-no/Loading5.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgY_R2UbYBcGImi3DYPz3QWnCbXqpGcMktA0tYjHTkoMAliJZ_OUluWMVY1d09sqK3KvoYqrKH4vg2xFdJ5HAH1VAhyphenhyphenY5fHBM1yoU0PY0LZdADTa1dMKVcHYbUmfaxWlzii4MnIMn8OXQg/w128-h54-no/Loading8.GIF

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjeOvJbjzc6Ef05gLFYwv1EB9Czh0zhEgnh9eAiiH9SiP1DtP1Hu6k5vc6R8GECsdmuHDY1fAkodIHgbr2tbImNOtGvnNSA-g_cbt92y6op6qW5V-D22XUMhHrSwaCYjFOlK5JIo4OQqw/s128-no/Loading9.GIF

http://www.yamaha-motor.co.id/typo3conf/ext/ndn_download/Resources/Public/Img/loading-animation.gif

Ya,, sobat Save As.. itulah Cara Mudah Membuat Efek Loading Yang Keren Pada Blog,,, Semoga Bermanfaat bagi sobat-sobat Save As.. TerimaKasih ... 

Tweet