Home » » Membuat Slide Show Foto Dengan Efek Jquery

Membuat Slide Show Foto Dengan Efek Jquery

Membuat Slide Show Foto 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)
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Lora Malunk Blog
tutorial blog up to date
Loading...

+ komentar + 8 komentar

20 Maret 2012 20.06

wah..boleh di praktekan nih sob,kalau keren langsung di publish.

lama saya gak mampir2 ke blog sobat,he..he..slm kompak selalu

Terimakasih Marinda Jaya atas Komentarnya di Membuat Slide Show Foto Dengan Efek Jquery
24 Maret 2012 20.28

sobat emang kreatif, ane jadi tertarik pengen bikin juga kaya gini.

kalau di dalam postingan gimana sobat?

Terimakasih Rino Safrizal atas Komentarnya di Membuat Slide Show Foto Dengan Efek Jquery
25 Maret 2012 07.02

Terima kasih sahabat atas berbagi tipsnya nih

Terimakasih Ferry Nurse atas Komentarnya di Membuat Slide Show Foto Dengan Efek Jquery
26 Maret 2012 15.05

ane coba dulu yah bang

Terimakasih Hzndi atas Komentarnya di Membuat Slide Show Foto Dengan Efek Jquery
29 Maret 2012 20.34

Terima Kasih pak...saya sudah pasang ...sebagai balasannya saya pasangkan backlink di link teman saya ya...

Terimakasih Papermean atas Komentarnya di Membuat Slide Show Foto Dengan Efek Jquery
20 April 2012 12.48

Makasih Artikel nya Sob :-p... Jalan2 Ke Blog Gw ye :D maklum masih newbie http://gmopera.blogspot.com/

Terimakasih Welcome To My Blog atas Komentarnya di Membuat Slide Show Foto Dengan Efek Jquery
20 April 2012 22.54

salam kenal gan

Terimakasih information system atas Komentarnya di Membuat Slide Show Foto Dengan Efek Jquery
2 Agustus 2012 09.51

bang saya sudah nyoba dan berhasil, tapi menu dropdown saya gak keliatan gara2 ketutupan slide, klw ditaruh selain diatas tag penutup head bisa gag? biar gag mengganggu menu, trims atas jawabannya

Terimakasih Admin Alumni Arroyan atas Komentarnya di Membuat Slide Show Foto Dengan Efek Jquery

Posting Komentar

Kebijakan berkomentar akan dihapus, jika tidak sesuai dengan aturan dibawah ini, Demi kenyamanan kita bersama :

» Menggunakan bahasa yang tidak sopan (Sara, Pornografi, Menyinggung)
» Duplikat komentar
» Komentar menautkan link secara langsung
» Komentar tidak berkaitan dengan artikel
» Judul Komentar Berupa Promosi

Terima Kasih .... Lora Malunk Blog

 

Configurasi

Alexa :
Stats :
Page Rank : Free PageRank Checker
DMCA :
Amung :
Bloggers : Bloggers - Meet Millions of Bloggers
Extreme :
eXTReMe Tracker
Support : Lora Malunk Blog | Songong Template | Tutorial Blog
Copyright © 2011. Lora Malunk Blog - All Rights Reserved
Template Modify by Lora Malunk Blog
Proudly powered by Blogger