Membuat jQuery Banner Rotator - Slideshow

Labels: • •
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...
Membuat jQuery Banner Rotator - Slideshow

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