Membuat Slide Show Foto Dengan Efek Jquery

Selamat pagi sahabat blogger, Kali ini saya akan memberikan sebuah trik blog yang berhubangan dengan Slide Show Foto, Slide Show Foto sendiri berbagai macam model slide show dapat saja tercipta berkat adanya JQuery. Mungkin anda sering melihat gambar atau foto yang ditampilkan dalam bentuk slide pada blog yang anda kunjungi. Ini tentu dapat memberikan daya tarik tersendiri bagi pengunjung web maupun blog.

Sebelum melakukan langkah selanjutnya anda bisa lihat demonya terlebih dahulu, agar hasilnya nanti bisa maksimal lihat. D E M O 

Kali ini saya akan mencoba membuat slide show foto dengan efek jquery :

Langkah 1
- Cari code </head>

Langkah 2
- Masukkan Code Jquery dibawah ini tepat diatasnya code </head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>

Langkah 3

- Jika diblog anda sudah terpasng Code Jquery ini, maka jangan melakukan langkah di atas

Langkah 4
- Klik save template

Langkah 5 

- Kemudian tambahkan gadget baru (Add new gadget)
- Pilih HTML/JavaScript

Langkah 6

- Copy dan paste Code dibawah ini kedalam gadget HTML/JavaScript

<script src=" http://loramalunkblog.googlecode.com/files/codelora-malunk.blogspot.animation1.js.txt " type="text/javascript">
    </script><script src="http://kodecode.googlecode.com/files/animation2.js" type="text/javascript"></script>
    <script src="http://loramalunkblog.googlecode.com/files/lora-malunk.animation3.js" type="text/javascript">
    </script><style type="text/css">
    .amdhas { height: 232px; width: 432px; padding:0; margin:0; overflow: hidden; -webkit-box-shadow: 2px 2px 4px #000;-moz-box-shadow: 2px 2px 4px #000;-moz-border-radius: 10px; -webkit-border-radius: 10px;}.amdhas img { height: 200px; width: 400px; padding: 15px; border: 1px solid #ccc; background-color: #f8f8ff;-webkit-border-radius: 10px;-moz-border-radius: 10px;}</style><div class="amdhas" id="ke2">
    <img height="200" src="URL GAMBAR DI SINI" width="400" />
    <img height="200" src="URL GAMBAR DI SINI" width="400" />
    <img height="200" src="URL GAMBAR DI SINI" width="400" /></div>
    <script type="text/javascript">
    $('#ke2').cycle({fx:'scrollDown',speedIn:  2000,speedOut: 500,easeIn:'bounceout',easeOut: 'backin',delay:-2000});
    </script>

Langkah 7

- Simpan atau Save dan lihat hasilnya

Catatn Akhir :
Ukuran Gambar Foto dapat diatur dengan merubah angka yang berwarna merah (232, 432, 200, 400)