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)
0 comments: