Hafiizh

Efek loading di blog ini sangat sederhana tentapi efek loading nya begitu menarik dan banyak pilihan efek loadingnya. Dengan menggunakan efek page loading ini tidak akan terlalu memberatkan Loading Blog anda, Berikut Screenshot Efek Loading Di Blog Hafiizh

Tutorial Memasang Efek Loading Di Blog

- Masuk ke blogger
- Klik Template > Edit HTML
- Cari kode ]]></b:skin> (mempermudah pencarian tekan CTRL+F)
- Copy kode CSS dibawah ini, lalu paste di atas kode ]]></b:skin>

/* 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/AVvXsEj5ahGrNUvZ8cOI0O_Q2EAcKFnGVL-eh5l511PDP18EULOOD4o8QElIDm5RHZdoXC1EXb2oWsPJSzOzhH7e8hf0Umv5JPioKzjua9m6kPhONhDm6YdBBaW4yf6xTMeOGKWzqujPSIRe_dk/s128-no/Loading4.GIF;) no-repeat 50% 50%;padding:1em 1.2em;display:none}

- Cari kode </body> (mempermudah pencarian tekan CTRL+F)
- Copy kode JQuery dibawah ini, paste di atas kode </body>

<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>

- Klik Simpan Template