Cara Membuat Efek Loading Pada Blog

DEMO

Cara Membuat Efek Loading Pada Blog - Soree gann :D lagi pada ngapain nih ? nganggur ? mending nyimak Cara Membuat Efek Loading Pada Blog biar blognya tambah keyen :v yuk langsung aja cekidottt..

1. Masuk ke Blogger

2. Pilih Template - Edit HTML

3. Cari kode </head> Untuk memudahkan pencarian Pencet [CTRL+F]  

4. Copy Kode jQuery dibawah ini dan letakkan tepat diatas kode </head>

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

*Lewati cara ini jika di blog agan udah terpasang kode jQuery!

5. Lalu cari kode   ]]></b:skin> untuk memudahkan pencariannya seperti cara langkah no.2 lalu copy kode dibawah ini dan letakkan tepat diatas kode ]]></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/AVvXsEhfcyV8Mb9eag1cISgNdbddy-VBRMcAtx1ttcQZyRb-1Wm1lmComrsDLuwJRJcViqfogr1TQj9-0QO6mMGtfAOBZlmXtlYLeBeExoNRiT6hCjXtKRqa7IAOSehg6r1IGDOZHz7IrQzDPNI/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;
color:white;
padding:1em 1.2em;
display:none;
}

  
6. Selanjutnya cari kode </body> dan copy kode dibawah ini dan letakkan kode tsb tepat diatas kode </body>

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

7. Lalu klik Simpan Template dan tarararara!! :D lihat hasilnya horree blognya tambah keyenn deh>.<

Sekian dulu gan artikel tentang Cara Membuat Efek Loading Pada Blog semoga bermanfaat & see u! :D 

Script By :  Kang Ismet

Tweet