Cara Membuat Slide Show Sederhana Dengan Menggunakan Script

 

Cara Membuat Slide Show Sederhana Dengan Menggunakan Script

Untuk kali ini kita akan mencoba membuat Slide Show Sederhana sendiri yang bisa dipasang pada blog Anda.
Contohnya adalah seperti berikut ini dan coba anda klik tombol " Play ".

Image 1 Image 2 Image 3 Image 4 Image 5 Image 6

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 :

<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> <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="http://buyanur.com/wp-content/uploads/2010/05/motivasi.jpg" /> </div> <table bgcolor="#0000ff" cellpadding="4" cellspacing="1"><tbody> <tr> <td align="center" bgcolor="#ffff00"> <select name="slide" onchange="change();"> <option selected="selected" value="http://buyanur.com/wp-content/uploads/2010/05/motivasi.jpg">Image 1 </option> <option value="http://www.fbcommentsbuddy.com/fb/images/it-cant-perfect-again.gif">Image 2 </option> <option value="http://www.fbcommentsbuddy.com/fb/images/to-be-trusted.gif">Image 3 </option> <option value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqy5a5k8pGjDXikxZg8B7LFeBDSdcQ8W7EE0IELUj4zOG-LDk4rQhCB7EOKIi9xoOH4CcekolOUiTM5KbMji9hmTFsf2zZr01xQwho6l_u7al1onnGJZZzOVOCZH07Tpleor9xGBp4gSM/s1600/lincoln-gagal.jpg">Image 4 </option> <option value="http://www.fbcommentsbuddy.com/fb/images/trust-yourself-you-think-you-do.gif">Image 5 </option> <option value="http://i1231.photobucket.com/albums/ee514/bloggingimages/My%20Husband%20Ate%20All%20My%20Ice%20Cream/share.jpg">Image 6 </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 Show nya
sesuaikan dengan jumlah yang anda inginkan.

3. Simpan Gadget Anda.

Selamat mencoba, good luck!

Sumber Artikel : Blog Syamsudin

Categories: Blog , Script , Tips dan Trik , Tools , Tutorial