Cara Membuat Efek Loading di Blog

Lumayan ngiler juga saat ngelihat blog kang Ismet. Ada efek loader saat ngeklik halaman di blog kangIsmet.net. Iseng-iseng contek eh, jadi kegirangan sendiri saya. Oke, thanks berat buat Kang Ismet yang udah menginspirasi saya buat pakai efek loader ini.

Nah, sekarang blog Nemu Kabar sudah ada efek loadernya lho, udah lihat kan saat kalian ngeklik link atau ngebuka halaman di blog Nemu Kabar, ada efek load kotak biru muter dengan background warna hitam. Tertarik ya buat efek loader kayak punya saya ini ? Sabar bro dan sis semua. Saya akan coba share cara membuat efek loading di blog seperti yang aku pasang di blog Nemu Kabar.

Pertama-tama yang harus diperhatikan adalah kode Javascriptnya. Pesan saya, jangan pernah meletakkan link Javascript yang sama dalam satu template ya. Ini tidak baik. Efeknya jelas biasanya perintah yang akan kita inginkan tidak akan tereksekusi lho.

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/AVvXsEgzIM-55P1qDKgUF6oGCoZfQyi9Qbr8QtaRmTlyIaBBG9_8rdLLEadPLhxcI4q7FQEW3TtIXzI0H8fuyAVoZG7F9VLbQQPKCHNnr883z0ViffP2-uNczzvKqFwQsucbKK72nKChToVTYo38/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 kawan.