Headlines News :
Home » » Membuat Slide Gambar Efek Terjatuh Dengan jQuery

Membuat Slide Gambar Efek Terjatuh Dengan jQuery

Written By Unknown on Senin, 09 April 2012 | 21.48

                 Berbagai ragam dan model slide dapat saja tercipta berkat adanya penggunaan jquery. Mungkin Kalian sering melihat gambar atau foto yang ditampilkan dalam bentuk slide pada blog yang loe 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.
Kali ini AinK akan coba buat slide gambar foto terjatuh.
Kalee aje bisa yee hehehe XD
Hasilnya bisa lu lihat Di sini.

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

<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.Save dan lihat hasilnya.

Enbe:ganti tulisan warna merah dengan URL gambar kalian
dan ukuran Gambar Foto dapat diatur dengan merubah angka 232, 432, 200, 400
Share this article :

0 komentar:

Arsip

Komentar


Pengikut

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Кџ-мά-ђα дίηК - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger