Cara Membuat Efek Loading di Blog
Baiklah, langsung saja ke pokok permasalahan yaitu trik blogging tentang cara membuat efek loading di blog.
Kalian bisa langsung copas saja scipt di bawah ini sebelum kode ]]></b:skin> :
#page-loader {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:999999;
background: #000 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZHvn3o7ET6nidvnwcRwNZfrcID0fqJyL48e5APa_lZZk08kI-lQDsqDAWNPKMJSHxToLwo_k-9j4CNv0htclPy0zu7HICnCF67dWlja_giJRvZxABIy0qr-TWwjHUs06ugw9OmgI0BjPm/s1600/AjaxLoader.gif") no-repeat 50% 50%;
padding:1em 1.2em;
display:none
}
Penjelasan :
Pada background, kalian bisa ganti dengan kode warna kesukaan kalian,
dan URL gambar, adalah gambar loader dengan format Gif. Bisa kalian
ganti dengan link gambar loader sesuai dengan kesukaan kalian.Selanjutnya, silahkan cari kode </body>, biasanya posisinya sebelum kode </html> ya. Cari dengan menekan CTRL+F dan jika sudah ketemu, copas saja script di bawah ini sebelum kode </body> :
<script type='text/javascript'>
//<![CDATA[
// Menyisipkan markup tabir animasi
$(document.body).append('<div id="page-loader"></div>');
// Saat halaman aktif terpicu untuk berpindah/keluar menuju halaman lain...
$(window).on("beforeunload", function() {
// ... tampilkan tabir animasi dengan efek `.fadeIn()`
$('#page-loader').fadeIn(1000).delay(6000).fadeOut(1000);
});
//]]>
</script>
Jika sudah, silahkan kalian save template kalian, dan langsung saja test, apakah efek loader kalian telah terbaca dan bekerja secara normal, jika berjalan. Maka materi saya ini saya harus bilang " SEMPURNAAAA....!!!" (Pinjem slogannya Demian). Hehehee....
Jika ada kendala, silahkan untuk berkonsultasi di sini ya. Selamat belajar dan semoga berhasil ya Sob.
Salam Tokek Kesel . . .
.jpg)
