Membuat Slide Gambar Efek Terjatuh Dengan jQuery

Berbagai ragam dan model slide dapat saja tercipta berkat adanya penggunaan jquery. Mungkin sobat sering melihat gambar atau foto yang ditampilkan dalam bentuk slide pada blog yang anda kunjungi. Ini 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.

Langkah pembuatannya :
1.    Cari kode  
2.    Pasang kode Jquery ini diatas kode tadi

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

3.    Klik save

4.    Kemudian tambah gadget baru (Add new gadget)

5.    pilih HTML/JavaScript

6.    copy dan paste kode ini ke dalam gadget tadi.

<script src="http://imdad.googlecode.com/files/animation1.js " type="text/javascript">
</script><script src="http://imdad.googlecode.com/files/animation2.js" type="text/javascript"></script>
<script src="http://imdad.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="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>

7.    Simpan / Save dan lihat hasilnya

Keterangan:
Ukuran Gambar Foto dapat diatur dengan merubah angka 232, 432, 200, 400

Selamat menikmati Slide Gambar Efek Terjatuh

Membuat Slide Gambar Efek Terjatuh Dengan jQuery 9 out of 10 based on 10 ratings. 9 user reviews.

Tutorial Blog

• Cara mengganti background Kotak Komentar Blog 1
• Cara Mudah Membuat Random Background Color
• Memperbesar Gambar pada Artikel Blog Dengan jQuery Image Zoom 2.0
• Cara Simple Membuat Script Link Banner Pada Blog Plus Wadah Text Area
• Cara Mudah Auto Hide Dan Menghilangkan Navbar Blogger
• Cara Membuat Slide Gambar Berjalan Pada BLOG
• Cara Mudah Mendeteksi Blog Yang NoFollow atau DoFollow dengan AddOns Mozilla Firefox
• Cara Mencari Blogger Satu Kota atau Satu Daerah
• Cara Memasang Photo Dan Avatar di Kotak Komentar Blogger
• MEnambah Dan Memasang Gadget HTML Code Javascript Pada Sidebar
• Cara Cek Link Yang Rusak Di Blog
• Cara Membuat Kotak Wadah Kode HTML Dengan Warna Pada Postingan
• Cara simpel Membuat Spoiler (Tombol Hide Show Kotak Kode HTML Pada Posting)
• New !! Cara Membuat Related Post Keren Dengan Tampilan Image