cara membuat SlideShow Sederhana

Cara membuat Slideshow sederhana dengan tombol Navigasi 

Demo

 

Kamu pasti pusing memikirkan cara
membuat tampilan gambar dengan gaya Slideshow di blog. Sebagian cara yang pernah Mr baca, rata-rata mengusung fitur jquery. Memang efek slide show yang di hasilkan dari jquery terkesan lebih "smooth" tapi tidak semua blogger yang berhasil menerapkannya. Termasuk Andika sendiri. Entah Mr yang tidak paham dengan jquery atau template yang di gunakan yang tidak cocok. Tapi Mr tidak mempersoalkan hal itu karena Mr pikir, Mr tidak butuh efek Slideshow di blog ini.

Nah, trick yang akan Mr_Joe_mblo bagikan kali ini adalah cara membuat tampilan slideshow di blog lengkap dengan tombol navigasi tanpa bantuan jquery.

Tujuan membuat tampilan slideshow di blog tentu memiliki alasan beragam, anggap saja untuk menghemat ruang tampilan dan lain sebagainya.

Menurut pak kecek hehe..(Mr_Joe_mblo), Jika kamu hanya ingin membuat tampilan slideshow berjalan otomatis (gambar berganti otomatis dengan sendirinya), kamu tidak harus capek-capek memasang efek jquery di blog. cukup Edit gambar dan jadikan Animasi (gif) dengan bantuan sofware pembuat animasi (gif) untuk menggabungkan beberapa gambar menjadi satu.

Itu sebuah keputusan yang Mr pikir paling praktis dan mudah. Tapi tentu saja dalam catatan tujuan dan fungsinya.

Kembali ke topik,

Script yang akan Andika bagikan ini mampu membuat tampilan slideshow blog kamu dengan nuansa yang berbeda.

Demo

Bagaimana?

Cukup simple dan gampang kan?

Jika kamu ingin mencoba, silahkan tambahkan script di bawah ini di mana pun kamu suka. Baik itu di postingan maupun widget blog.

<script type="text/javascript">
var width = 250;
var height = 100;
var imgAr1 = new Array();
var rImg1 = new Array();
imgAr1[0] = "url gambar";
imgAr1[1] = "url gambar2";
</script>

<table cellpadding=0 cellspacing=0><tr><td>
<img id=pic border=0>
</td></tr>
<tr><td>
<table width=100% style="font-size: 13px; font-family: verdana, arial;">
<td align=center><a style="color: blue; cursor:pointer;" onclick="start()">Start</a></td> 
<td align=center><a style="color: blue; cursor:pointer;" onclick="slideshow()">Next</a></td> 
<td align=center><a style="color: blue; cursor:pointer;" onclick="prev()">Prev</a></td> 
<td align=center><a style="color: blue; cursor:pointer;" onclick="end()">End</a></td>
<td align=center><a href="http://my05.blogspot.com" style="color: blue; text-decoration: none; 
cursor:ponter; font-size: 13px;"></a></td> 
</tr></table>
</td></tr></table>

<script src='http://my05-blogspot.googlecode.com/files/slide.js' type='text/javascript'/></script>

• Untuk mengganti ukuran dari tampilan, berikut kode yang harus kamu edit,

var width = 250; untuk ukuran lebar
var height = 100; untuk ukuran tingginya tampilan

Satuan di hitung dalam ukuran piksel silahkan sesuaikan dengan ke inginan.

• Untuk mengatur gambar dari slideshow, berikut kode yang harus kamu edit,

imgAr1[0] = "url gambar";
imgAr1[1] = "url gambar2";

Kamu dapat menambahkan foto sebanyak yang kamu suka. Yang pasti, untuk tampilan seperti ini setidaknya kamu butuh dua gambar yang berbeda. untuk menambahkan gambar yang lainnya, tambahkan atribut seperti,

imgAr1[2] = "url gambar3";
imgAr1[3] = "url gambar4";
imgAr1[4] = "url gambar5";

dan seterusnya..

• Untuk meletakan tampilan slideshow tepat di tengah, tambahkan attribut <center> di bagian awal script dan </center> di bagian akhirnya.

Mudah bukan?

Selamat mencoba salam blogger! 

By@Masjo