JNet99

Enjoy Saja Bro

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&#8221; target=”_blank”> <img src=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010001.jpg&#8221; width=”300″ height=”200″ /> </a>
</td>
<td>
<a href=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010002.jpg&#8221; 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&#8221; target=”_blank”> <img src=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010008.jpg&#8221; 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&#8221; 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&#8221; 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&#8221;, 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&#8221; target=”_blank”> <img src=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010001.jpg&#8221; width=”300″ height=”200″ /></a></td>
</tr>
<tr>
<td>
<a href=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010002.jpg&#8221; target=”_blank”> <img src=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010002.jpg&#8221; width=”300″ height=”200″ /></a></td>
</tr>
<tr>
<td><a href=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010008.jpg&#8221; target=”_blank”> <img src=”http://jnet99.co.cc/wp-content/uploads/2009/03/s2010008.jpg&#8221; 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.

Contohnya bisa dilihat di http://jnet99.co.cc/?p=98

Filed under: Uncategorized

16 Responses

  1. Begitu saya lihat lagi : marquee dan /marquee nya.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

delicious

%d blogger menyukai ini: