Slide Show Humble jQuery ini ane share atas permintaan sobat Tukang Colong..
yg mengeluh karena banyaknya banner yg harus dipajang di halaman depan..


Baiklah.. 
Karena ane orang nya baik hati dan tidak sombong..
ane buat Slide show Humble jQuery ini..

Tapi kekurangan Slide Show Humble jQuery ini adalah :
Kita harus mengklick tombol star terlebih dahulu untuk melihat slide show gambar berikutnya.


Atau lihat demonya :

Demo Slide Show Humble jQueryKlik disini untuk melihat demo Slide Show Humble jQuery

Gimana ???
Ada yang tertarik memasang slide show ini??
sebenarnya sangat mudah untuk memasang nya loh..

Begini neg caranya :
Langkah 1
Letakan kode di bawah ini diatas kode </head>

<script type='text/javascript'>
var rotate_delay = 5000; // delay in milliseconds (5000 = 5 secs)
current = 0;
function next() {
if (document.slideform.slide[current+1]) {
document.images.show.src = document.slideform.slide[current+1].value;
document.slideform.slide.selectedIndex = ++current;
   }
else first();
}
function previous() {
if (current-1 &gt;= 0) {
document.images.show.src = document.slideform.slide[current-1].value;
document.slideform.slide.selectedIndex = --current;
   }
else last();
}
function first() {
current = 0;
document.images.show.src = document.slideform.slide[0].value;
document.slideform.slide.selectedIndex = 0;
}
function last() {
current = document.slideform.slide.length-1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
}
function ap(text) {
document.slideform.slidebutton.value = (text == &quot;Stop&quot;) ? &quot;Start&quot; : &quot;Stop&quot;;
rotate();
}
function change() {
current = document.slideform.slide.selectedIndex;
document.images.show.src = document.slideform.slide[current].value;
}
function rotate() {
if (document.slideform.slidebutton.value == &quot;Stop&quot;) {
current = (current == document.slideform.slide.length-1) ? 0 : current+1;
document.images.show.src = document.slideform.slide[current].value;
document.slideform.slide.selectedIndex = current;
window.setTimeout(&quot;rotate()&quot;, rotate_delay);
   }
}
</script>

Simpan template dan lanjut ke tahapan selanjutnya.

Langkah 2
Tambahkan kode dibawah ini pada add gadget HTML/Java Script

<center>
<form name=slideform>
<tr>
<td align=center bgcolor="white">
<b>Slideshow Humble jQuery</b>
</td>
</tr>
<div style="border: 1px solid #ccc; padding-top: 10px; margin: 3px;
overflow: auto;
width: 350px;
height: 130px;
">
<tr>
<td align=center bgcolor="white">
<img src="images1.jpg" name="show">
</td>
</tr>
</div>
<table cellspacing=1 cellpadding=4 bgcolor="#000000">
<tr>
<td align=center bgcolor="#C0C0C0">
<select name="slide" onChange="change();">
<option value="images1.jpg" selected>Gambar 1
<option value="images2.jpg">Gambar 2
<option value="images3.jpg">Gambar 3
</select>
<input type=button onClick="first();" value="|<<" title="Beginning">
<input type=button onClick="previous();" value="<<" title="Previous">
<input type=button name="slidebutton" onClick="ap(this.value);" value="Start" title="AutoPlay">
<input type=button onClick="next();" value=">>" title="Next">
<input type=button onClick="last();" value=">>|" title="End">
</td>
</tr>
</table>
</form>
</center>

- Ganti images1.jpg, images2.jpg, images2.jpg dengan url gambar/banner sobat.
- Aturlah ukuran Widht dan Hight nya sesuai dg sidebar or keinginan sobat.
- Kata-kata Slideshow Humble jQuery bisa sobat rubah sesuai keinginan sobat.

Source Code Slideshow HumbleKlik disini untuk mengambil semua source code Slideshow Humble jQuery

Langkah 3
Simpan dan lihat blog sobat.

Langkah 4
Selesai.

Langkah 5
Semoga bermanfaat..
Terimakasih.