Membuat Slide Foto Dengan JQuery

Membuat slide foto dengan jquery. Pada kesempatan kali ini, Penulis ingin berbagi dan membuat tutorial tentang bagaimana membuat slide foto dengan jquery, sesuai permintaan dari teman Roman, jika teman-teman belum tau bagaimana bentuk slide foto silahkan lihat foto disamping blog ini, ada foto yang secara bergantian berganti itulah yang di sebut slide foto.
Sebenarnya Penuis baru saja belajar tentang jquery, tapi semoga saja artikel yang masih sederhana ini dapat membantu teman-teman sekalian yang ingin dan tertarik untuk membuat slide foto seperti yang ada pada blog ini. Dan jika ada kekurangan nantinya dapat mengirim pesan melalui komentar dan jika ada error juga dapat ditanyakan kepada Penulis.

Tanpa panjang lebar, ikuti step by step atau langkah demi langkah bagaimana membuat slide foto dengan jquery berikut.

Copy script berikut:

<div align="center"><script src=" http://kodecode.googlecode.com/files/animation1.js " 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: 380px; padding:0; margin:0; overflow: hidden; -webkit-box-shadow: 2px 2px 2px #000;-moz-box-shadow: 2px 2px 2px #000;-moz-border-radius: 5px; -webkit-border-radius: 10px;}.amdhas img { height: 200px; width: 380px; padding: 1px; border: 3x solid #ccc; background-color: #ffffff;-webkit-border-radius: 10px;-moz-border-radius: 10px;}</style><div class="amdhas" id="ke2">
<img height="210" src="http://i612.photobucket.com/albums/tt202/bapakmu/c5.jpg" width="400" />
<img height="210" src="http://i612.photobucket.com/albums/tt202/bapakmu/c8.jpg" width="400" />
</div>
<script type="text/javascript">
$('#ke2').cycle({fx:'scrollDown',speedIn: 1000,speedOut: 500,easeIn:'bounceout',easeOut: 'backin',delay:-100});
</script><br />
<b>by kemajuan-diri.blogspot.com</b></div>

Letakkan sesuai keinginan teman-teman dimana untuk meletakkan slide foto nantinya. Caranya masuk ke rancangan dan masuk ke elemen laman dan tambah gadget pilih html/javascript dimana teman-teman ingin meletakkannya. Sampai di situ tidak ada masalahkan :)

Setelah selesai memasukkan dalam gadget blog, berikutnya cari kode </head> . Untuk mencari lebih mudah tekan ctrl+f, dan ketik </head> , untuk mencari kata lain juga dapat menggunakan ctrl+f. Jika sudah dapat kodenya silahkan copy script berikut, tepat diatas </head>. Ingat ya tepat diatasnya dan jangan sampai salah.

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


Dan setelah selesai meletakkan script tadi, silahkan simpan template teman dan coba lihat hasilnya, akan tampak foto-foto slide yang kita buat tadi. Untuk mengganti gambar silahkan ganti link src dengan alamat foto atau gambar, yang teman-teman inginkan. Selamat mencoba semoga berhasil, jika ada yang kurang paham silahkan komen dan akhir kata salam blogger :).

7 komentar :

  1. Mantep kang infonya sukses selalu kang salam kenal

    ReplyDelete
  2. mksh mas bro, slam kenal juga :)

    ReplyDelete
  3. baru sempat mampir gan…10 hari inetnya moggok..

    ReplyDelete
  4. @seri bahasa : yoi, gan gpp :D, mksh dah berkunjung :)
    @Harianto : mksh mas bro :D

    ReplyDelete
  5. Ooo Anda bisa langsung datang ke Blog Trends yg pernah saya buat, atau anda bisa langusng ke Aplikasi Komputer , saya harap Mas bisa mampir ke Client saya.

    ReplyDelete
  6. saya sdh melihat mas, bgs blog ny..
    saya mw bwt jasa blog gt rncana ny. Jd lg cri referensi sma yg berpnglaman kyk mas bro :)

    ReplyDelete

Gunakan bahasa yang santun ya :)