Cara Membuat Gambar Berjalan Dengan Jquery

Cara Membuat Gambar Berjalan Dengan Jquery

Hai kawan, kali ini Syahroonix akan berbagi tentang Cara Membuat Koleksi Gambar Berjalan Dengan Jquery. kalian yang suka koleksi gambar-gambar di blog harus coba widget yang satu ini. Ini akan membuat gambar-gambar kalian terlihat bagus dengan melihatnya satu per satu. Kalau kalian mau tahu seperti apa widget tersebut. Silahkan kalian lihat di : http://demp-widget-syahroonix-blog.blogspot.com/2013/03/demo-gambar-bergerak-jquery.html.

Ok, bagaimana jadinya kawan? tertarik tidak untuk mencoba widget ini? Kalau kalian tertarik, kalian boleh mengikuti caranya dibawah ini :

Langkah Pertama
Seperti biasa, yang harus kalian lakukan adalah Log in ke akun Blogger kalian dengan akun kalian sendiri. Jangan minjem akun orang OK.

Langkah Kedua
Setelah Log in, kalian langsung OTW ke Template lalu klik Edit HTML dan tidak perlu centang Expand Widget Templates

Langkah Ketiga
Carilah kode </head> dengan memanfaatkan CTRL+F atau F3

Langkah Keempat
Setelah kode </head> nya ketemu, masukkan kode dibawah ini diatas kode </head> tadi.

<script type="text/javascript" src="http://tutorialforyou.googlecode.com/files/crawler.js"> </script>

Langkah Kelima
Setelah itu, yang perlu kalian lakukan hanya mengklik Save Template.

Langkah Keenam
Eitts, belum selesai kawan. Setelah itu, pergilah kalian ke Tata Letak atau Layout dan pilih Tambah Gadget atau Add Gadget lalu pilih menu HTML/Javascript

Langkah Ketujuh
Biarkan form judul kosong, kecuali apabila kalian mau mengisi-nya. Itu terserah. Di kolom kode masukkan kode di bawah ini.

 <script type="text/javascript">
marqueeInit({
uniqueid: 'image-marquee',
style: {
'padding': '2px',
'width': '468px',
'height': 'auto'
},
inc: 2, //speed - pixel increment for each iteration of this marquee's movement
mouse: 'cursor driven', //mouseover behavior ('pause' 'cursor driven' or false)
moveatleast: 4,
neutral: 150,
savedirection: true,
    random: true
});
</script>
<div class="marquee" id="image-marquee">
<img src="http://img222.imageshack.us/img222/8854/waterox.jpg" /><img src="http://img405.imageshack.us/img405/7314/cocovv.jpg" /><img src="http://img853.imageshack.us/img853/5038/bonsaiy.jpg" />
</div>

Keterangan :
Kalau kalian ingin merubah gambarnya dengan gambar kalian , kalian hanya perlu mengganti url gambarnya.Misal :  <img src="http://img222.imageshack.us/img222/8854/waterox.jpg" />. Gantilah url yang berwarna hijau dengan url gambar kalian. Dan kalau kalian ingin menambahkan gambar yang kalian mau, tinggal masukkan kode ini   <img src="URL GAMBAR SNIXI" /> dibawah kode <img src="http://img853.imageshack.us/img853/5038/bonsaiy.jpg" /> atau kalian atur-atur saja sesuka hati kalian.

Langkah Kedelapan
Klik Simpan Widget atau Save. Dan lihatlah hasilnya di blog atau website kalian.

Mungkin begitu saja dari Syahroonix tentang artikel Cara Membuat Koleksi Gambar Berjalan Dengan Jquery.  Ingatlah ini adalah artikel asli milik saya, anda boleh mengcopy-nya tapi jangan mengklaim kalau ini adalah artikel milik anda. Kalaupun anda mengcopy ini jangan sampai lupa untuk menyisipkan link asli dari blog ini. Biasakan juga untuk menghargai hasil karya orang lain dengan minimal meninggalkan komentar baiknya dibawah. Dan jangan lupa untuk membaca artikel lain di blog ini dan mengklik iklan yang ada untuk mendukung blog ini. Terima kasih.

Tags :  Cara membuat gambar berjalan, cara membuat gambar bergerak, membuat gambar bergerak dengan jquery, cara membuat gambar berjalan kesamping dengan jquery, membuat efek gambar berjalan dengan jquery, cara membuat efek gambar bergerak ke samping dengan efek jquery, cara membuat efek gambar keren dengan jquery, membuat efek gambar dengan jquery


Sumber artikel : Syahroonix Blog | Berbagi Segala Hal
 Sumber kode : Tutorial-4u

Artikel Terkait: