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 tampilang slideshow nya, klik saja gambar yang disamping...

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

Dibawah ini langkah-langkah menggunakan slideshow pada banner :

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"

Semoga berhasil ya kawan, jangan lupa tuliskan komentar atau saran dari kawan sekalian

sumber : http://modification-blog.blogspot.com/2010/06/membuat-jquery-banner-rotator-slideshow.html

Share it to your friends..!