Memasang efek animasi loading halaman blogger

Home jQuery Memasang efek animasi loading halaman blogger

Memasang efek animasi loading halaman blogger

Diposting oleh: Dafin defandaky pada: 11 Agustus 2013

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..

3 komentar

Unknown25 September 2014 pukul 12.12
Thnks gan atas informasinya di atas keren banget loadingnya
jangan lupa main2 di blog saya y gan http://jebret-cerot.blogspot.com/
BalasHapus
Balasan
Unknown21 November 2014 pukul 16.10
Keren Sob , Mampir juga di http://trinityreaper.blogspot.com
BalasHapus
Balasan

Kode klik emo:

$:\$

$\o/$

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag ...KODE ANDA DI SINI...
Untuk menyisipkan script, gunakan ...KODE SCRIPT ANDA...
Untuk menyisipkan gambar, gunakan tag ...URL GAMBAR ANDA ...
Untuk menyisipkan judul, gunakan tag ...JUDUL ANDA...
Untuk menyisipkan catatan, gunakan tag ...CATATAN ANDA...
Untuk menciptakan efek tebal gunakan tag ...TEKS ANDA...
Untuk menciptakan efek huruf miring gunakan tag ...TEKS ANDA...

Konversi KodeOOT

Konversi Emo Oot

$:\$

$\o/$

Jika anda memiliki bahasan atau topik lain yang sama sekali tidak ada hubungan dengan tutorial diatas anda bisa menyampaikannya di halaman OOt. klik [link ini] untuk membuka halaman OOT.

Memasang efek animasi loading halaman blogger

Artikel Terkait

3 komentar