Cara Membuat Jquery Slideshow Dengan Cycle Plug In 0

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 anda tertarik menggunakan jquery slideshow dengan cycle plugin untuk blogger khususnya atau website anda ikutilah langkah-langkah di bawah ini:

1.Seperti biasa anda harus log in dulu ke blogger
2.Pilih layout
3.Kemudian pilih edit HTML
4.centang Expand Widget Templates dan backup dulu templete anda (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 css code anda bisa menggunakan code css di bawah ini copy dan pastekan diatas
]]></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
}

anda bisa mengedit kode css diatas sesuai dengan yang anda inginkan

7. Dan untuk kode html,letakan kode html dibawah ini dimana anda ingin menampilkan slideshow tersebut

<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>

Ganti tulisan yang berwarna hijau denagan alamat Url dimana anda menyimpan file gambar anda

Demo Untuk Pemula