Memasang efek animasi loading halaman blogger

Javascript jQuery

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

Artikel Terkait

  • Memasang efek animasi loading halaman blogger
    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 in…
  • Mengompress data Javascript tools YUI Compressor
    Mungkin blog tanpa javascript akan terasa biasa saja dan menjadi kurang menarik, itu semua menurut saya. karena dengan javascript kita dapat menciptakan hal - hal cantik dengan efek yang terlihat unik untuk sebuah tampilannya. dengan semakin majunya javascript berbagai hal yang terbilang berhubungan dengan blog kini banyak tercipta, bila anda …
  • Memasang alert untuk mengaktifkan javascript
    Tutorial ini berguna untuk para pengunjung blog anda yang menon-aktifkan fungsi javascript di web browser mereka. misalnya, ketika blog anda tidak memiliki tampilan maksimal saat fungsi javascript di web browser pengunjung anda dinon-aktifkan, maka para pengunjung blog anda harus mengaktifkan fungsi javascript di web browser mereka dengan men…
  • Filter otomatis kata - kata kotor dalam komentar
    Adakalanya sebuah komentar yang masuk dalam blog anda memiliki kata - kata yang tidak pantas untuk di cantumkan dalam komentar dan ini mengganggu pengunjung lain yang berkomentar. umumnya tidakan berkomentar rendahan seperti ini dilakukan oleh orang yang tidak bertanggung jawab dan tidak memiliki etika yang baik yang tidak berani menampakkan d…
  • Smooth scrolling pada komentar
    Sebenarnya efek smooth scrolling ini untuk menandai sebuah elemen di dalam komentar itu sendiri pada hash target komentar dengan jQuery dan beberapa tambahan css yaitu css target. lihat gambar dibawah ini: Untuk memasangnya pada komentar blog anda, silahkan ikuti langkah dibawah ini 1. Login ke akun blogger Anda. 2. Pilih Template » Ed…
  • Membuat persentase ketika scroll digulung
    Mungkin trik ini terbilang tidak penting untuk mendukung apa pun di dalam blog, namun untuk anda para sobat yang suka dengan kreasi dan menambah unik tampilan, persentase scroll bisa dipasang sebagai hiasan. Dengan menambahkan persentase scroll, pengunjung akan bisa melihat berapa persen halaman yang telah di scroll/ia gulung, jika penggulung…

3 komentar

  1. Thnks gan atas informasinya di atas keren banget loadingnya
    jangan lupa main2 di blog saya y gan http://jebret-cerot.blogspot.com/

    BalasHapus
  2. Keren Sob , Mampir juga di http://trinityreaper.blogspot.com

    BalasHapus

Link aktif dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">...KODE ANDA DI SINI...</i>
Untuk menyisipkan script, gunakan <i rel="pre">...KODE SCRIPT ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">...URL GAMBAR ANDA ...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">...JUDUL ANDA...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">...CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <b>...TEKS ANDA...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>...TEKS ANDA...</i>

Konversi KodeOOT
:) :( =( :wa: :s ^_^ :D =D ^:D @@, ;) :-bd :-d :ya: :'( T_T :\ :p B) :Q :Ozz 7:( \o/ **p
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.

Back to Top
Loading...