Cara Membuat Slideshow Dengan Jquery Cycle Plug In

Published by Kang Fathur Monday, May 23, 2011

jQuery Cycle Plugin adalah sebuah Slideshow Plug In yang ringan dan cukup mengagumkan. Plugin ini menyediakan sebuah metode pemanggilan cycle yang di libatkan pada sebuah element container,yang mana tiap-tiap bagian element dari container menjadi sebuah slide. Jika sobat tertarik menggunakan jquery slideshow dengan cycle plugin untuk blogger khususnya atau website sobat ikutilah langkah-langkah di bawah ini

1. Seperti biasa sobat harus log in dulu ke blogger
   
2. Pilih Rancangan
   
3. Kemudian pilih Edit HTML
   
4. centang Expand Widget Templates dan backup dulu templete sobat (untuk menghindari apabila terjadi kesalahan)
   
5. Copy code dibawah ini dan pastekan diatas code </head> atau di bawah code ]]></b:skin>
   
   
   

   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"> </script>
   <script type="text/javascript" src="http://my-slideshow.googlecode.com/files/jquery.cycle.all.min.js"> </script>
   <script type="text/javascript">
   $(document).ready(function(){
   $('#myslides').cycle({
   fx: 'cover',
   speed: 500,
   timeout: 2000
   });
   });
   </script>

   
   
   
   
6. Untuk code CSS di bawah ini sobat copy dan pastekan diatas kode ini ]]></b:skin>
   
   

   #myslides {
   width: 370px;
   height: 220px;
   padding: 0;
   margin: 0 auto;
   }
   
   #myslides img {
   padding: 10px;
   border: 1px solid rgb(100,100,100);
   background-color: rgb(230,230,230);
   width: 350px;
   height: 200px;
   top: 0;
   left: 0
   }

   
   
   
   PERHATIAN
   Sobat bisa mengedit kode css diatas sesuai dengan yang sobat inginkan misalnya width (lebar slidshow/gambar) dan height (tinggi slideshow/gambar)
   
   
   
   
7. Langkah yang terakhir adalah sobat memasang kode HTML di bawah ini dimana sobat ingin meletakkan SlidShow tersebut dengan mendambah Gadget.

<div id="myslides">
<img src="http://my-slideshow.googlecode.com/files/cilimus.jpeg.jpg" />
<img src="http://my-slideshow.googlecode.com/files/air-panas.jpg" />
<img src="http://my-slideshow.googlecode.com/files/gunung-ciremai.jpg" />
<img src="http://my-slideshow.googlecode.com/files/telaga-remis.jpg" />
<img src="http://my-slideshow.googlecode.com/files/kolamlinggarjati.jpg" />
</div>

PERHATIAN
kode yang berwarna kuning adalah alamat Gambar. Silahkan sobat ganti dengan alamat gambar sobat.

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI