Cara Membuat Sendiri Slideshow Yang Sederhana

Blog ini telah beberapa kali mengetengahkan tutorial
tentang yang berkenaan dengan masalah Slide Show.
Dan untuk kali ini kita akan coba untuk membuat
sendiri Slide Show yang bentuknya cukup sederhana
yang bisa dipasang pada blog anda.

Contohnya adalah seperti berikut inidan coba anda klik tombol " Star ".

Image 1 Image 2 Image 3 Image 4 Image 5

Untuk membuat Slideshow seperti ini,langkahnya seperti berikut ini :

1.   Rancangan -> Tambah Gadget
      Pilih HTML/JavaScript

2.   Copy kode di bawah ini kemudian
      masukkan ke dalam kontennya :

<center><form name="slideform">
<div style="border: 2px solid rgb(0, 0, 0); height: 270px; margin: 2px; overflow: auto; padding-top: 5px; width: 370px;">

<img name="show" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfXlissLfr-mZB5wr1ppdyNDaUdEvND9OoLYQEIBqdve7welJHomisTR3iFKGGdGlG2wRW2bwE559lhlkdPZ4-Do8NsitdepCfrRzYNQATGRZbkjfQQakTjTu3F2v4aSUkensB4aCJ6O0h/" />

</div>
<table bgcolor="#0000ff" cellpadding="4" cellspacing="1"><tbody>
<tr> <td align="center" bgcolor="#ffff00">
<select name="slide" onchange="change();">
<option selected="selected" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfXlissLfr-mZB5wr1ppdyNDaUdEvND9OoLYQEIBqdve7welJHomisTR3iFKGGdGlG2wRW2bwE559lhlkdPZ4-Do8NsitdepCfrRzYNQATGRZbkjfQQakTjTu3F2v4aSUkensB4aCJ6O0h/">Image 1</option>
<option value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggnIgt0jnACqUYrsoAN-t3KeDmDxoDaJm5gbQO4yE0l3cvXLY7WeTXVJLmtt-dkGDhng45hWKzAMopqeqs7OOLPvJZIQ-VDLSaJL5J52QFtvVOt8Xcbv6eJXOL0FBypbPIVVHc2CbyLhDY/">Image 2 </option>
<option value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5SK7J4dz1ZfeRR4BWJ6MAaLWaEPrWE50FUl3CCxHoCTEdn2Jywkdmn_RnouxLoqVlN9lqmfnjERwDnlQRFaChgrIf-kSB-OQZyu5My9LNbIZOsC4f5i6TThgSz_V-0uicdAZcKWZ_MG5k/">Image 3 </option>
<option value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqpmstHdI9gGJW6mdaA4Fbjtra2LGOQkPiZphuU19NBuYdjwRQ2nRnwf14k_ymcNzVlZNWhui2_HTJwXx4GrJtJSqv4-7VS8EAT6hD2jfq0Ibg2jNwvUMmRcoBUDvvR5zWQeS5nP8uo7CA/">Image 4 </option>
<option value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvbcxyhOt3kIN4JLT4_8exwTL_sGpUIpTzhycg4D4dug_qmSSjs-kNJgJru2v7_hepkkT7t7EGSU0t76zec5wGB9LblVIxWDn0oAXCGtnmTHRCvv_h-rS7B7il5dQ844FtQcgD8jBZ-rOh/">Image 5  </option></select>

<input name="slidebutton" onclick="ap(this.value);" title="AutoPlay" type="button" value="Start" />

</td> </tr>
</tbody></table>
</form>
</center>

KETERANGAN :

Gantilah gambar Image 1 sampai Image 5 dengan

gambar milik anda sendiri.

Bila perlu, tambahkan lagi gambar Slide Shownya
sesuaikan dengan jumlah yang anda inginkan.

3.   Lalu anda masuk ke Edit HTML

4.   Carilah kode </head>

5.   Copy kode berikut dan Paste
      di atas kode </head> ini.

<script language='JavaScript'>

var rotate_delay = 4000;
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>

6. Pratinjau lalu simpan template anda.

Selamat mencoba, good luck!