Cara Membuat Efek Loading Keren di Blogger

Author. Dwi    On. 7:00 AM   

Blog Template Hack

Pernah berkunjung ke blog kang ismet gak? pasti pernah, secara tuh blog terbesar di Indonesia (Menurut saya) hehee. Nah kali ini saya akan berbagi cara membuat efek loading keren di blogger seperti blog kang ismet ;) 

Loading memang cukup mengganggu bagi para pengunjung, dan untuk menghilangkan kejenuhan mari hiasi atau beri efek animasi saat loading ;) langsung aja deh, cekidot

Langkah 1 : Tambahkan jQuery pada blog sobat. Simpan kode di bawah ini sebelum </head>

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

Apabila template sobat sudah memiliki jQuery, lewati langkah ini. Harap diperhatikan, tidak boleh ada script jQuery lebih dari satu. 

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/AVvXsEhLoa_CAiiSDwi3N1e7_ixFRriF2gBcDlsPL6U51bYb_hgaz_LJyTjwnWkCCQ4eXBBWoNKSWn0MnEzy2e5TBzFR0ESO-waFhuCy_2OmYGHHrwBsjLaw2T8vf6Q1cIBT-LBYUM3srgzK17I/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>

Simpan Template dan lihat hasilnya ;)