Slider Menu Image

Sebelumnya saya sudah pernah membahas cara membuat slider menu ala zinmag-primus, kali ini saya akan coba berikan yang sedikit berbeda. Slider ini hanya menampilkan gambar saja tanpa dibubuhi keterangan atau diskripsi dari link atau gambar tersebut, namun saya rasa slider menu dengan image ini tampilannya lebih efektif ketimbang slider menu yang dulu pernah saya jelaskan. Sebagai contoh bisa sobat lihat pada contoh demo slide-nya disini.

Tampak gambar akan bergerak sendiri sesuai dengan delay atau waktu yang telah di setting pada kode javascript-nya. Untuk membuat cukup mudah, bagi yang suka yang bereksperimen dengan template-nya silahkan dicoba tutorialnya berikut ini.

• Silahkan download terlebih dahulu kode javascript-nya disini dan disini.
• Kemudian upload file js tersebut ke google sites atau google code.
• Setelah selesai upload, lihat url atau link dari file yang sudah di upload, seperti contoh link yang sudah saya upload bentuknya seperti ini :

  http://miscah.googlecode.com/files/jquery-1.3.1.min.js
  http://miscah.googlecode.com/files/jquery.scrollTo.js
  

• Sekarang bagian edit template, masuk ke Tata Letak –> Edit HTML.
• Tambahkan kode berikut ini setelah kode ]]>
  
  
  
  
  
  
  
• Simpan Template.

Keterngan :

1. Kode yang berwarna merah adalah kode js yang sudah sobat upload ke hosting google site atau google code, jika malas mengupload silahkan gunakan saja milik saya.
2. var speed = 5000 adalah kecepatan slide image-nya, semakin tinggi angkanya, maka akan semakin lambat.
3. Untuk width:320px dan height:200px masing-masing untuk lebar dan tinggi menu, sesuaikan dengan lebar sidebar sobat.

• Sekarang bagian memasang gambar slide-nya, masuk ke Elemen Halaman.
• Pilih Tambah Gadget –> pilih yang HTML/Javascript.
• Sekarang masukkan kode berikut :

  
  

  
  

  • http://miscah.blogspot.com/2010/03/roten-herzen-template.html">http://lh5.ggpht.com/_7Y9pl24WpQY/S5k7-LSv8kI/AAAAAAAADHo/9E8EpPU1mKI/image_thumb%5B2%5D.png" height="200px" width="320px" border="0" alt="Free Blogger Template" />
  • http://miscah.blogspot.com/2010/03/smart-gradient.html">http://lh6.ggpht.com/_7Y9pl24WpQY/S57X-OyXc5I/AAAAAAAADJ4/ukDMwgpRQDE/smart%20gradient_thumb%5B2%5D.png" height="200px" width="320px" border="0" alt="Free Blogger Template" />
  • http://miscah.blogspot.com/2010/02/blue-light-template.html">http://lh4.ggpht.com/_7Y9pl24WpQY/S3aqOXkcFgI/AAAAAAAAC9U/iAjS27QlZYU/image_thumb2.png" height="200px" width="320px" border="0" alt="Free Blogger Template" />

  
  

  
  prev
  pause
  next
  play

  
  
  

• Kemudian Simpan.

Keterangan :

1. Kode yang berwarna hijau adalah url yang akan di tuju.
2. Kode yang berwarna ungu adalah url dari gambar.

Selamat mencoba.