Membuat gambar slide dengan 17 efek lebih

Assalamualaikum Wr. Wb . . .

Membuat gambar slide dengan 17 efek lebih, membuat gambar slide kali ini sangat berbeda dengan membuat slide image yang dulu, membuat gambar slide kali ini lebih keren menurut saya karena efek nya ada 17 lebih, nah untuk anda yang penasaran silahkan lihat  DEMO nya.
lihat gambar yang berganti.
Di demo saya hanya menampilkan satu efek di antara 17 efek lebih karena tidak mungkin saya menampilkan semua efek karena terlalu banyak, efek yang saya  gunakan di  DEMO  itu yaitu efek fade nah kalau anda ingin membuat seperti itu silahkan ikuti langkah - langkah nya :

1. Log in ke blog anda
2. klik rancangan
3. klik tambah gadget
4. klik HTML/JAVASCRIPT
5. masukan kode di bawah ini di kotak bagian bawah

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://sites.google.com/site/sin1ajablog/jquery/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('#content-slider').cycle({
      fx: 'fade'
   });
});
</script>
<style type="text/css">
#content-slider {
   position: relative;
   width: 100%;
   height: 250px;
   overflow: hidden;
   margin:0 auto;
}
#content-slider img {
   display: block;
   width: 100%;
   height: 250px;
}
</style>
<div id="content-slider">
   <img src="http://a7.sphotos.ak.fbcdn.net/hphotos-ak-ash4/s720x720/394117_248588995208664_100001726955893_593913_217339109_n.jpg" alt="Slideshow 1" />
   <img src="http://a5.sphotos.ak.fbcdn.net/hphotos-ak-ash4/s720x720/390756_243203332413897_100001726955893_578592_123316234_n.jpg" alt="Slideshow 2" />
   <img src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-ash4/s720x720/396010_244614755606088_100001726955893_581904_2082391021_n.jpg" alt="Slideshow 3" />
</div>

Keterangan dari kode - kode yang saya beri warna :

biru       : itu adalah kode url gambar jadi silahkan anda ganti dengan url foto - foto milik anda.
100%   : ini adalah lebar area slide show, jadi kalau kode 100% nanti terlalu lebar di blog anda silahkan anda sesuaikan lebar nya bisa anda ganti misal nya 300px atau sesuka anda yang penting sesuai dengan lebar area di blog anda.

250px  : ini adalah ketinggian area slide show, silahkan anda ganti juga kalau kurang tinggi

100%  : ini adalah kode lebar gambar yang ada di dalam area slideshow tadi jadi, jika anda rubah lebar dan tinggi area slide show anda juga harus rubah kode ini, sesuaikan dengan kode di area slide show

250px : ini juga adalah tinggi gambar, jadi silahkan anda sesuaikan dengan tinggi area slideshow.

fade : Nah ini dia Efek nya anda bisa ganti efek nya jika anda bosan dengan efek ini, silahkan anda ganti dengan kode yang saya sediakan di bawah ini, pilih salah satu saja ya.

Efek - Efek Slide show

1. scrollUp
2. scrollDown
3. scrollLeft
4. scrollRight
5. slideX
6. slideY
7. shuffle
8. turnUp
9. turnDown
10. turnLeft
11. turnRight
12. zoom
13. fadeZoom
14. blindX
15. blindY
16. blindZ
17. growX
18. growY
19. curtainX
20. curtainY
21. cover
22. uncover
23. toss
24. wipe
25. fade

Tuh ternyata ada 25 efek nya, jadi kalau bosen tinggal pilih salah satu nya lagi.
jadi nanti kalau anda bosen dengan efek fade silahkan anda ganti dengan 24 efek yang lainnya
misalnya efek zoom jadi nanti kode nya seperti ini,

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script>
<script type="text/javascript" src="http://sites.google.com/site/sin1ajablog/jquery/cycle.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $('#content-slider').cycle({
      fx: 'zoom'
   });
});
</script>
<style type="text/css">
#content-slider {
   position: relative;
   width: 100%;
   height: 250px;
   overflow: hidden;
   margin:0 auto;
}
#content-slider img {
   display: block;
   width: 100%;
   height: 250px;
}
</style>
<div id="content-slider">
   <img src="http://a7.sphotos.ak.fbcdn.net/hphotos-ak-ash4/s720x720/394117_248588995208664_100001726955893_593913_217339109_n.jpg" alt="Slideshow 1" />
   <img src="http://a5.sphotos.ak.fbcdn.net/hphotos-ak-ash4/s720x720/390756_243203332413897_100001726955893_578592_123316234_n.jpg" alt="Slideshow 2" />
   <img src="http://a8.sphotos.ak.fbcdn.net/hphotos-ak-ash4/s720x720/396010_244614755606088_100001726955893_581904_2082391021_n.jpg" alt="Slideshow 3" />
</div>

Nah setelah anda selesai mengganti url gambar dengan gambar anda dan sudah mengganti efek - efek nya silahkan anda klik SIMPAN, dan coba lihat efek nya, jangan lupa sesuaikan area lebar dan tinggi slideshow dan juga lebar + tinggi gambar juga harus di sesuaikan.
salam system of blog.
source kode