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
- Seperti biasa sobat harus log in dulu ke blogger
- Pilih Rancangan
- Kemudian pilih Edit HTML
- centang Expand Widget Templates dan backup dulu templete sobat (untuk menghindari apabila terjadi kesalahan)
- 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>
- 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)
- 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.
kode yang berwarna kuning adalah alamat Gambar. Silahkan sobat ganti dengan alamat gambar sobat.
INFORMASI SYARAT DAN KETENTUAN | KETERANGAN |
---|
KOMENTAR PADA JUDUL DOA | : | [Cara membuat silde jquery]-[Link 1]-[Link 2] |
---|
Anda sedang membaca artikel tentang Cara membuat silde jquery dan anda bisa menemukan artikel Cara membuat silde jquery ini dengan url http://iqroknetjaya.blogspot.com/2011/07/cara-membuat-silde-jquery.html. Anda boleh menyebarluaskan atau mengcopy artikel Cara membuat silde jquery ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.
2 comments:
mantabs gan..ini ni yg selama ini aq cari..
tapi apakah setelah update posting terbaru.. akan mengikuti secara otomatis...
atau masih memasukkan gambar secara manual...??
makasih toturialnya, saya coba dulu yah
Posting Komentar
Sopan itu lebih indah