Wednesday, February 20, 2013

Cara Memasang jQuery Image Preloader


Loading Gambar
  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(){$(&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 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 :)

BAGUS.CO