Membuat jQuery Banner Rotator - Slideshow

Bismillah. Masih ingat beberapa waktu yang lalu Blogger Tune-Up pernah membuat artikel yang sejenis, namun masih menggunakan kode JavaScript biasa belum melibatkan framework jQuery. Artikel tips-n-trik banner rotator sekarang ini lebih sederhana tetapi sangat bermanfaat untuk mengakali ruang kosong (space) yang sempit pada blog kita. Cocok sekali bagi anda yang mengikuti program-program affiliasi dari pihak ketiga atau hanya sekedar variasi untuk memperindah blog kita. Sebenarnya script kali ini bisa digunakan untuk menampilkan apapun didalam suatu wadah/container, bisa berupa gambar, iklan dan lain sebagainya. Plugin yang di gunakan adalah jQuery Innerfade buatan Torsten Baldes. Silahkan berekspresi sesuai keinginan anda... Let's begin for play...

Demo jQuery Banner Rotator

Integrasi jQuery Banner Rotator - Slideshow

Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:

]]></b:skin>

Langkah 4
Masukan (copy paste) kode CSS dibawah ini diatas kode pada langkah 3:

#bannerrot {margin: 0; padding:0;}
#bannerrot ul, #bannerrot ol{list-style:none !important; margin:0 !important; padding:0 !important;}
ul#bannerimg li img{border: 1px solid #ccc;padding: 4px !important;margin: 0 !important;}
ul#bannerimg li a{text-decoration: none !important;}
#banner_2, #banner_3, #banner_4 {display:none;}

Langkah 5
Cari kode dibawah ini:

</head>

Langkah 6
Masukan (copy paste) kode jQuery dibawah ini diatas kode pada langkah 5:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script type='text/javascript' src='http://medienfreunde.com/lab/innerfade/js/jquery.innerfade.js'/>
<script type='text/javascript'>
$(document).ready(
function(){
$('ul#bannerimg').hide();
$('ul#bannerimg:first').show();
$('ul#bannerimg').innerfade({
speed: 1000,
timeout: 5000,
type: 'sequence',
containerheight: '220px'
});
}
);
</script>

Langkah 7
Simpan template (Baca keterangan)
Langkah 8
Masuk ke "Rancangan - Elemen Laman"
Langkah 9
Tambahkan sebuah gadget dengan type "HTML/JavaScript"
Langkah 10
Masukan kode HTML dibawah ini didalam "konten":

<div id="bannerrot">
<ul id="bannerimg">     
<li id="banner_1"><a href="URL" target="_blank"><img src="URL Gambar" alt="Keterangan Gambar" /></a></li>
<li id="banner_2"><a href="URL" target="_blank"><img src="URL Gambar" alt="Keterangan Gambar" /></a></li>     
<li id="banner_3"><a href="URL" target="_blank"><img src="URL Gambar" alt="Keterangan Gambar" /></a></li>     
<li id="banner_4"><a href="URL" target="_blank"><img src="URL Gambar" alt="Keterangan Gambar" /></a></li>
</ul>   
</div>

Langkah 11
Klik tombol "Simpan" (Baca keterangan)

Unduh jQuery Banner Rotator

Keterangan:

• Jika template blogger anda sudah ada framework jQuery maka link pada langkah 6 baris 1 tidak perlu ditambahkan (dibuang).
• Efek yang digunakan secara default menggunakan jenis fade, jika ingin menggunakan jenis efek slide maka tambahkan code "animationtype: 'slide'," (tanpa tanda kutip) diata kode "speed: 1000," (Langkah 6 baris 7).
• Secara default lebar wadah/container sudah diset otomatis, kita hanya perlu mengeset tinggi wadah/container (Lihat langkah 6 baris 10) pada kode "containerheight: '220px'" (tanpa tanda kutip). Ubah nilai 220px sesuai dengan ukuran tinggi gambar yang akan kita gunakan.
• Jumlah slide/banner yang akan kita gunakan sebenarnya tidak terbatas, tapi disini hanya menggunakan 4. Jika anda ingin menambahkan jumlah slide/banner silahkan tambahkan kode dibawah ini sejumlah yang kita perlukan (Lihat langkah 10):

<li><a href="URL" target="_blank"><img src="URL Gambar" alt="Keterangan Gambar" /></a></li>

• Ubah URL sesuai dengan link yang akan kita arahkan pada saat pengunjung mengklik gambar.
• Ubah URL Gambar sesuai dengan tempat (file hosting) dimana kita menyimpan gambar tersebut.
• Ubah Keterangan Gambar sesuai dengan judul atau maksud gambar tersebut.

Selamat mencoba dan semoga berhasil... Happy Blogging :)