» 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...

 

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<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":

1 2 3 4 5 6 7 8

<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)
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 :)