Membuat Effect Loading Blog dengan jQuery

Kali ini kita akan membuat Effect Loading Halaman menggunakan Fitur jQuery dengan tambahan ke-2 bumbu coding CSS & JavaScript , akan kita buat menjadi sebuah resep efek loading page / loading halaman yang akan tampil ketika berpindah halaman ..

Pada Kesempatan ini saya akan membuat ke-2 coding nya terpisah , agar mudah di pahami oleh anda yang ingin mencoba resep " Membuat Effect/Efek Loading Halaman " dengan Bumbu CSS & Javascript ini ..

Langkah-1 : Pastikan sobat sudah memasang jQuery Library! jika sobat belum memasang jQuery Library, silahkan simpan kode di bawah ini tepat di atas kode </head> :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"/>

Catatan Penting! : Pemasangan jQuery dalam Blog hanya boleh 1x saja, jika lebih dari 1 maka Efek-efek yang mengandalkan fungsi jQuery tidak akan berfungsi.

Langkah Ke-2 perhatikan Bumbu CSS dibawah ini , jika sudah dirubah lalu simpan tepat sebelum kode ]]></b:skin> :

#page-loader {
    position: fixed!important;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #f2f2f2 url(//googledrive.com/host/0B7H_GQEvKCj1Rmh1blVLZV9fSlk/Gambar/kr-loading.gif) no-repeat 95% 95%;
    color: #fff;
    padding: 1em 1.2em;
    display: none;
}

Keterangan CSS :

1. #f2f2f2 → Diganti dengan Code HEX Warna Background untuk loading sesuka anda. Menggunakan Color Picker →

2. //googledrive.com/host/0B7H_GQEvKCj1Rmh1blVLZV9fSlk/Gambar/kr-loading.gif → Diganti dengan Alamat Gambar/Animasi berformatkan (.GIF) sesuka anda , dan anda pun bisa membuat Animasi Loading sendiri , silahkan Klik disini .


Langkah Ke-3 : Simpan bumbu JavaScript di bawah ini Tepat sebelum kode </body> :

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

► Selesai, Save Template! dan sekarang tinggal "REFRESH [F5]" pada halaman blog anda .. Semoga Berhasil!

Catatan: BUMBU = CSS & JavaScript ( CSS & JavaScript itu Bagaikan Bumbu-nya HTML. :D )

Semoga postingan saya tentang Cara Membuat Loading Blog dengan CSS & JavaScript yang saya bagikan ini bermanfaat untuk sobat blogger yang membutuhkan. Terima kasih telah meluangkan waktu untuk membaca Kumpulan Tutorial Blog 2014 yang saya bagikan ini.
Salam Blogger,
Kang Rian