Cara Membuat slide sederhana

Tentu sangat menyenangkan apabila blog pribadi kita dihiasi foto-foto keluarga, teman-teman and gank, atau foto-foto kegiatan outbond lainnya. Apalagi foto-foto tersebut ditampilkan dalam bentuk slide atau gambar berjalan sehingga lebih menghemat tempat. Untuk keperluan diatas, saya sudah bikin slide dengan perintah-perintah sederhana yang mungkin saja ada rekan-rekan yang mungkin juga tertarik untuk memasang slide diwidgetnya masing-masing.  Dan sangat disayangkan skrip yang saya bikin ini tidak bisa dipakai di worpress.com, jadinya saya menggunakan worpress.org di blog saya yang lain. Saya ada membuat dua macam skrip, yang pertama untuk gerakan Horizontal, dan yang kedua untuk gerakan Vertikal.
Dalam membuat skrip ini saya masih tetap menggunakan perintah Marquee yang saya kombinasikan dengan perintah yang lainnya. Skrip pertama ini untuk membuat slide dengan gerakan Horizontal

<marquee id=”JSlideH” width=”500″ direction=”right”>
<table border=”0″>
<tr>
<td>
<a href=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010001.jpg” target=”_blank”> <img src=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010001.jpg” width=”300″ height=”200″ /> </a>
</td>
<td>
<a href=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010002.jpg” target=”_blank”> <img src=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010002.jpg ” width=”300″ height=”200″ /></a>
</td>
<td>
<a href=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010008.jpg” target=”_blank”> <img src=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010008.jpg” width=”300″ height=”200″ /></a>
</td>
</tr>
</table>
</marquee>
<form>
<input onclick=”document.getElementById(‘JSlideH’).direction = ‘left’ ; document.getElementById(‘JSlideH’).start()” type=”button” value=”Left” />
<input onclick=”document.getElementById(‘JSlideH’).stop()” type=”button” value=”Stop” />
<inpu onclick=”document.getElementById(‘JSlideH’).direction=’right’ ; document.getElementById(‘JSlideH’).start()” type=”button” value=”Right” /> </form> 

Penjelasan Skrip : <marquee id=”JSlideH” width=”500″ direction=”right”> Perintah Marquee digunakan untuk menggerakan foto, dimana saya beri nama id=”JSlideH” dengan lebar width=”500″ dan dengan arah gerakan default ke arah kanan direction=”right”.  Untuk menempatkan foto dalam posisi bersebelahan saya memanfaatkan perintah <table border=”0″>,  border=”0″ artinya tidak diberi garis. Dan disini saya membuat table dengan jumlah baris=1 dan kolom = 3, karena saya akan memasukan 3 foto.  <a href=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010001.jpg” target=”_blank”>  a href saya pergunakan agar supaya ketika  saya mengklik foto tersebut akan menuju ke alamat  url yang diinginkan, dan disini saya arahkan saja ke url foto saya sendiri.  target=”_blank” saya pergunakan agar pada saat mengklik dan membuka url yang dituju tadi akan terbuka windows baru dan tidak menutup page asal. <img src=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010001.jpg” width=”300″ height=”200″ /> </a></td>  Perintah ini untuk menampilkan gambar atau foto. src=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010001.jpg”, merupakan alamat sumber dari foto yang akan ditampilkan. width=”300″ height=”200″, merupakan ukuran panjang dan lebar foto yang akan ditampilkan, panjang dan lebarnya ini hendaknya diberikan dengan nilai yang perbandingan yang pas, agar foto tidak kelihatan lonjong atau gepeng.
Yang kedua ini Slide yang berjalan Vertikal :

<marquee id=”JSlideV” width=”500″ direction=”up”>
<table border=”0″>
<tr>
<td><a href=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010001.jpg” target=”_blank”> <img src=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010001.jpg” width=”300″ height=”200″ /></a></td>
</tr>
<tr>
<td>
<a href=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010002.jpg” target=”_blank”> <img src=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010002.jpg” width=”300″ height=”200″ /></a></td>
</tr>
<tr>
<td><a href=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010008.jpg” target=”_blank”> <img src=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010008.jpg” width=”300″ height=”200″ /></a></td>
</tr>
</table>
</marquee>
<form>
<input onclick=”document.getElementById(‘JSlideV’).direction = ‘up’ ; document.getElementById(‘JSlideV’).start()” type=”button” value=”Up” />
<input onclick=”document.getElementById(‘JSlideV’).stop()” type=”button” value=”Stop” />
<input onclick=”document.getElementById(‘JSlideV’).direction=’down’ ; document.getElementById(‘JSlideV’).start()” type=”button” value=”Down” /> </form>

Diatas merupakan skrip untuk membuat slide bergerak secara vertikal.