Tutorial | jQuery
Image Preloader di perkenalkan oleh Abhin Sharma pada situs net tuts+
dan merupakan salah satu plugin yang banyak digunakan pada situs-situs
profesional. Jika di tilik dari fungsinya, sebenarnya plugin ini
hanyalah tambahan untuk mempercantik penampilan gambar.
Plugin jQuery Image Preloader berfungsi untuk memberikan efek delay
(lambat) pada saat proses pemanggilan (load) gambar pada halaman situs,
selama pemanggilan gambar belum sempurna maka lokasi gambar tersebut
akan di gantikan dengan animasi loading.
Setelah gambar tersebut siap ditampilkan (load 100%), animasi loading
akan di sembunyikan dan gambar akan ditampilkan dengan efek fade yang
lembut. Plugin ini akan memberikan kesan profesional pada blog dan
menunjukan kepada pengunjung bahwa bagian yang terkecil sekalipun sangat
diperhatikan sang pemilik blog. Bagaimana Cara Memasang jQuery Image
Preloader ini di Blog?
Untuk Cara Memasang jQuery Image Preloader di blogspot, kita cukup
menambahkan kode script dan CSS berikut ini kedalam template blog kita.
- Langkah pertama adalah cari kode: </head>
- Kemudian letakkan kode script berikut ke atasnya
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script src='http://bloggeracsessories.googlecode.com/files/jquery.preloader.min.js' type='text/javascript'/><script type='text/javascript'>$(function(){$("body").preloader();});</script>
- Kemudian cari kode: ]]</b:skin> dan tambahkan kode CSS berikut di atasnya.
.preloader {
background:url(http://nettuts.s3.amazonaws.com/860_preloaderPlugin/css/i/89.gif) center center no-repeat;
}
- Simpan template sobat dan dan lihat hasilnya.
Jika belum berhasil, coba hapus kode script yang saya tandai dengan warna biru yang tadi anda letakkan di atas kode </head>
Semoga berhasil sobat :)
