Membuat Effect Loading Blog dengan jQuery

Oleh. Kang Rian • 24 • Edit

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

Bagikan! Sent Share Tweet Pin it!

Kang Rian Ikuti

Web & Graphic Designer - Berpengalaman sejak 2010, fokus membantu Perusahaan / UMKM agar dikenal secara Global melalui Website Profesional & Desain yg Menjual.

Cek. Jasa-Design.web.id

24 komentar

Adra Alhafid6/30/2013 12:54 PM
kunjungan siang gan.... mampir ya....http://xbuzzy.blogspot.com/
:thumbup
BalasHapus
Balasan
hengki kristianto7/01/2013 11:16 PM
Wah, saya suka sekali dengan masakan anda yang penuh dengan bumbu eksentrik gan, terutama pada bagian CSS. Tapi gan kenapa di web ini saya tidak melihat anda memasangnya gan ? apakah tehnik ini dapat memperberat loading ?
Terimakasih sudah share , salam kenal
BalasHapus
Balasan
Kang Rian7/06/2013 12:36 PM
oke terimakasih gan ..
BalasHapus
Balasan
Rezky Maulana7/10/2013 11:21 AM
siipp dah bang , ane coba triknya ,...
BalasHapus
Balasan
Ilham Bachtiar7/10/2013 4:28 PM
Keren, keren blognya..... :2thumbup
BalasHapus
Balasan
jams adjah8/14/2013 11:14 PM
keren kang rian saya coba y.pi akang tw g cara membuat web pke framework yii.blz dsni atau bisa blz dweb ane y kang rian http://downloadcyber.byethost31.com
BalasHapus
Balasan
Reinhard Jonathan Silalahi3/19/2014 5:52 PM
Makasih atas ilmunya ya kang ... Hehe.. Ane ijin masukkan Loading seperti webnya kan rian ya..
http://reinhardjs.blogspot.com/
BalasHapus
Balasan
Reinhard Jonathan Silalahi3/19/2014 5:55 PM
Sorry ada kata yang kurang .. yang kan rian ...mohon diganti dengan kang ya.. hehe
BalasHapus
Balasan
Umar Azmar MF3/29/2014 11:23 AM
supeer skali kang,.. tutor2 sini sangat memperhatikan penambahan beban loading blog,... keep it up kang :D
BalasHapus
Balasan
ngurah arta5/01/2014 10:25 AM
kang. aku bikin animasi. dengan ukuran 1000x100 px. apa akan berpengaruh kalau ukurannya sebesar itu ?
BalasHapus
Balasan
Ivan Sonavia8/02/2014 11:46 AM
Kang Rian..

tutorial yang lengkap nih.
Bagaimana caranya kalau mau ganti animated gif pakai CSS?

http://cssload.net/en/animated_text <-- maunya pakai yang ini.

Thanks before Kang
BalasHapus
Balasan
Syahran Saputra10/19/2014 8:16 AM
Kang izin Penggunaan script Page Loadernya ya :shakehand di http://one-go.blogspot.com/ klo ngga boleh diinfo ya kang biar saya comot dari blog ane..
saya gunakan karena keren sekali kang,. terima kasih sebelumnya mohon direspon :sup:
BalasHapus
Balasan
Renaldy Ramadani10/26/2014 10:39 PM
:2thumbup mantabs
BalasHapus
Balasan