Cara Membuat efek Loading Ala Kang Kapuk

Kali ini efek loading yang berbeda dengan yang sebelumnya saya pernah share, cara ini saya temukan di catatan facebook Kang Kapuk. Sebenarnya sudah lama saya ingin memposting tentang efek ini namun baru saat ini bisa mempostingnya. Seperti yang pernah saya katakan pada tutorial-tutorial sebelumnya fungsi efek ini agar memperindah blog saat loading pengunjung tidak merasa bosan menunggu halaman sedang dimuat.

Demo loading

cara pemasangan

• Step 1  Buka blogger.com lalu pilih blog  anda
• Step 2  Pilih template lalu edit html
• Step 3  Cari kode ]]></b:skin> dengan mengklik   CTRL +F 
• Step 4  Copy kode berikut lalu pastekan pada diatas kode ]]></b:skin> tadi

#rand-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/AVvXsEgtSIsA4xBBC1e3gMrU9YJYru5VqyGgBx1Qatf7r6YQ5pt4XPtuSFeulvPRbcJs7b9AfTkPCAErsWzBM-C3IbeIviaefSGuTMcNq7oJP3Idh9Z02MQZBXe0GLG-x4jlCMrrVoKfQv8dy1U/s1600/loadinfo.net+%284%29.gif') no-repeat 50% 50%;  color:white;  padding:1em 1.2em;  display:none}

• Step 5  Cari Kode </body> lalu pastekan kode berikut diatasnya

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

• Step 6 Pastekan kode berikut diatas </head>

<script src='http://code.jquery.com/jquery-2.0.2.js'/>

• Step 7  Simpan lalu cek bog anda untuk melihat hasilnya

Lebih Banyak Efek Loading Klik Disini

jika ada yang ingin agan tanyakan  silahkan berkomentar .wassalamualaikum wr.wb.