GO Blog

Sudah lihat animasi loading blog ini, itu adalah hasil dari efek animasi loading beforeunload. Kali ini kita membuat efek animasi yang ditampilkan bukan karena terpicu oleh momen klik pada tautan melainkan karena aksi halaman yang mulai berpindah. Sehingga kita bisa merancang ulang efek animasi loading ketika perpindahan halaman dengan cara ini:

Anggaplah JQuery sudah terpasang di blog kita. Pertama, masuklah ke halaman editor HTML template, kemudian letakkan kode CSS ini di atas kode tag ]]></b:skin> atau </head> dengan pembungkus <style>...</style>:

#efek-load-db {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:9999;
  background-color:black;
  color:white;
  padding:1em 1.2em;
  display:none;
}

Kemudian sisipkan kode ini di atas tag kode </body>:

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

Klik Simpan Template.

Jika sobat ingin memambahkan/memberi animasi gunakan contoh css dibawah ini:

#efek-load-db {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:yellow url('url hosting gambar anda/img/loading.gif') no-repeat 50% 50%;
font:0/0 a;
text-shadow:none;
padding:1em 1.2em;
display:none;
}

untuk membuat animasi loading kunjungi [link] atau gunakan css milik blog ini

/* load db blog */
#efek-load-db {
position:fixed !important;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background:#222222 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSwqFXcaWpjBO3goNdIkUycUupcN-oH7iXUs3M6OPJhnygR9KggBDMCHFQRwaaQ_ZBdpz5moWlM79aaSpD1pem2tjp0984SoffeRjV1WolfJVkzrjwAiDeA2nCRqg3kwxRJcArOqdoxvY/s1600/AjaxLoader.gif') no-repeat 50% 40%;
color:white;
padding:1em 1.2em;
display:none;
font:0/0 a;
text-shadow:none;
}

Semoga berguna dan bermanfaat..