Membuat J-query banner dengan tampilan slide-show

Pada postingan kali ini kita akan membahas tentang tampilan banner dengan menggunakan slide-show. Mungkin kita semua sudah tahu apa itu slide-show.
Slide show adalah tampilan gambar yang berganti secara otomatis, jadi bila kita memasang banner dengan menggunakan slideshow, maka gambar pada banner kita berganti secara otomatis. kalau kawan sekalian ingin melihat contoh tampilan slideshow nya, klik disini

okeh langsung saja kita ke langkah-langkah cara pembuatannya..!!!

Dibawah ini langkah-langkah menggunakan slideshow pada banner :

1. Login ke Blogger
2. Masuk ke "Rancangan - Edit HTML"
3. Copy paste kode CSS dibawah ini diatas kode ]]></b:skin>
#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;}
4. Copy paste kode jQuery dibawah ini diatas kode </head>
<script type='text/javascript' src='<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js</a>'/>> <script type='text/javascript' src='<a href="http://medienfreunde.com/lab/innerfade/js/jquery.innerfade.js">http://medienfreunde.com/lab/innerfade/js/jquery.innerfade.js</a>'/> <script type='text/javascript'> function(){ $('ul#bannerimg').hide(); $('ul#bannerimg:first').show(); $('ul#bannerimg').innerfade({ speed: 1000, timeout: 5000, type: 'sequence', containerheight: '220px' }); } ); </script>
5. Simpan template (Baca keterangan)
6. Masuk ke "Rancangan - Elemen Laman"
7. Tambahkan sebuah gadget dengan type "HTML/JavaScript"
8. 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>
9. Klik tombol "Simpan"