Cara Buat Slide Gambar Terjatuh

Banyak ragam dan model slide dapat saja tercipta berkat adanya penggunaan jquery. anda sering melihat gambar atau foto dalam bentuk slide pada blog yang anda kunjungi. tentu dapat memberikan daya tarik bagi siapa saja yang melihat Bentuk slide foto tersebut diantaranya ada yang menggunakan efek transisi zoom, berjalan horizontal, vertical dan masih banyak lagi efek-efek yang tercipta dari kehandalan jquery ini.

Nah kali ini saya akan coba buat slide gambar foto terjatuh.
Hasilnya bisa anda lihat di sini.

Seperti biasa

1. Login ke Blogger

2. Pilih Tata Letak/Rancangan

3. Lalu Edit Html, jangan lupa Centang Expand Template Widget

4. Copy paste kode dibawah ini tepatnya diatas Kode </head>

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

(bila di dalam template anda sudah terpasang jquery, maka jangan lakukan langkah ini)

 5. kemudian Simpan Template

Dan untuk membukanya anda bisa menaruhnya di sitebar ataupun di postingan Copy paste Kode dibawah ini:

<script src="%20http://kodecode.googlecode.com/files/animation1.js%20" type="text/javascript">
</script><script src="http://kodecode.googlecode.com/files/animation2.js" type="text/javascript">
</script>
<script src="http://kodecode.googlecode.com/files/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="http://i44.tinypic.com/11icnk5.jpg" width="400" />
<img height="200" src="http://i44.tinypic.com/11icnk5.jpg" width="400" />
<img height="200" src="http://i44.tinypic.com/11icnk5.jpg" width="400" /></div>
<script type="text/javascript">
$('#ke2').cycle({fx:'scrollDown',speedIn:  2000,speedOut: 500,easeIn:'bounceout',easeOut: 'backin',delay:-2000});
</script>

link yang berwarna hijau ganti dengan link gambar milik anda

selamat mencoba...

<<DAFTAR ISI                                                                                                                       BERIKUTNYA>>