Membuat Effect Loading Blog dengan jQuery

Your Ads Here

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

Your Ads Here

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.

See also: Membuat Top Komentator pada Halaman Statis dan Komentar Blog

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;
See also: Simple Disable Right Click with Image [ Private ]

    background: #f2f2f2 url(//googledrive.com/host/0B7H_GQEvKCj1Rmh1blVLZV9fSlk/Gambar/kr-loading.gif) no-repeat 95% 95%;
    color: #fff;
    padding: 1em 1.2em;
    display: none;
}

Your Ads Here

Your Ads Here

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 .

See also: Basic Pembuatan Auto Popup di Blog

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);
});
See also: Writing the Resource Box so it Makes People click

//]]>
</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

Your Ads Here