Memasang jQuery Image Preloader pada Blog

Baca Juga

 

 

Sagitarius Kusadhi - 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;
}

Selanjutnya simpan pekerjaan anda dan lihat hasilnya, semoga postingan ini bermanfaat bagi pengguna dan pembaca khususnya bagi sobat blogger semua.