MOHON PERHATIAN!!!........ Sehubungan sedang "ERROR"nya situs HTTP://WWW.RIPWAY.COM, maka bila Anda menemukan tutorial yang menggunakan kode dengan nama situs tersebut, sementara waktu JANGANLAH Anda gunakan. Mohon maaf, semoga anda memakluminya.............................

Mengucapkan Selamat Datang, Semoga Dapat Berkenan Di Hati Anda



SYAMSUDINNAMAKU telah hadir

KUNJUNGI CHANNEL YOUTUBE SAYA

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 ini
dan coba anda klik tombol " Star ".














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!


6 comments:

Jefry mengatakan...

bagus sekali, slider semacam ini bisa makin memperindah tampilan blog selain itu bisa membantu mendapatkan banyak pageview
nice share

Unknown mengatakan...

pengen donx diajarin blog kayak gini.....

Agung Dirgantara mengatakan...

Kunjungan siang...
Keren sih mas,tpi terlalu berat menurut saya :3
salam kenal,minta kujungan baliknya yaa.. :v agungmasda.blogspot.com

Anonim mengatakan...

#ini cuma saran.. Kalo bikin tutorial matiin dulu anti copy nya, kalo mau ngasih ilmu jangan setengah setengah yang ada nanti blog ini bakalan sepi karna pengunjung nya bakal kecewa, mau belajar tapi harus download yg macem-macem kan aneh.

Unknown mengatakan...

Blognya norak, bikin sakit mata

Administrator mengatakan...

@Denny Juliantobeeehhahahahahahaah

Posting Komentar