Cara Memasang jQuery Image Preloader

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?

Sebagai contoh, diblog ini juga menggunakan jQuery Image Preloader. 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(){
 $(&quot;body&quot;).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 anda dan dan lihat hasilnya.

Jika belum berhasil, coba hapus kode script yang saya tandai dengan warna merah yang tadi anda letakkan di atas kode </head>

Share this post