08
Okt
2009
Okt
2009
Cara membuat slideshow
Posted by: adminCara membuat foto/image slideshow.
Oke langsung aja tanpa panjang lebar, kalau lebar mulutnya siapa..??
Mari ikuti langkah-langkah dibawah untuk membuat slideshow seperti contoh demo.
Demo:
Langkah-langkahnya adalah:
Letakkan kode berikut dibagian <head> website/blog kamu:
Salin kode JAVASCRIPT
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | <SCRIPT LANGUAGE="JavaScript"> <!-- Begin 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 >= 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 == "Stop") ? "Start" : "Stop"; rotate(); } function change() { current = document.slideform.slide.selectedIndex; document.images.show.src = document.slideform.slide[current].value; } function rotate() { if (document.slideform.slidebutton.value == "Stop") { 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("rotate()", rotate_delay); } } // End --> </script> |
Kemudian letakkan kode berikut dibagian body konten website/blog kamu:
Salin kode DIV
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <center> <form name=slideform> <tr> <td align=center bgcolor="white"> <b>Image Slideshow</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 file images1.jpg, images2.jpg dan images3.jpg dengan file gambar milik kamu.
Selesai! Selamat mencoba..

memuat halaman
iklan




Postingan yang lain:




klo imagenya diganti dengan postingan bisa gak mas, jadi begitu ada postingan baru langsung ada pada slideshow pertama, soalnya blog saya blog komik (http:komikdikit.blogspot.com ), saya pengen tampilannya seperti comicpress ada navigasi next, Prev dan random
coba pke jquery slideshow aja mas, rasanya pernah lihat blogspot yg pke slideshow itu, mas bisa cari tutorialnya digoogle
klo yg di comicpress itu pkai plugin wordpress mas, wordpress self hosted..
Betul mas comicpress harus selfhosting karena itu saya cari alternatif slideshow yang bisa diterapkan diblogspot, saya nemu beberapa di google, tapi yang menurut saya tampilannya paling cocok tuk komik saya adalah yang tutorial yang mas ini. btw terima kasih banyak tutorialnya, saya akan coba lagi.
ok silahkan dilanjutkan mas…
makasih kunjungannya..
mkasih booosss !!
he he he
sangat membantu,,,, mampir ya
mas, itu yang di script line 30,31 uda selesai ngetiknya apa belom ?
kok eror ya di line tsb
makasi sebelumnya
klo untuk blogspot, sblm dipasang kode javascriptnya itu harus diparsing dulu mas…
klo js nya langsung dipasang akan muncul error
yg khusus blogger dong..
diblogger juga bisa mas, pasang di ‘Tambah Gadget’ > nanti pilih ‘HTML/JavaScript’