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
Komentar Terbaru