Baru kemarin kita membahas tentang tutorial blogger dengan tema Membuat Effect Sliding Door With CSS, dan untuk kali ini kita akan kembali membahas tentang tutorial gambar blogger, tapi kali ini temanya adalah Membuat Gambar Bergetar Menggunakan jQuery. Dari judulnya saja kita sudah dapat menebak/membedakan kalo kali ini kita akan membuat tutorial gambar dengan bantuan jQuery berbeda dengan kemarin yang hanya membutuhkan bantuan dari CSS saja untuk membuatnya menjadi sempurna dan bisa di gunakan. Mungkin Anda sedang bertanya apa maksud dari judul tutorial kali ini? ya kali ini kita akan membuta gambar bergetar dengan sendirinya apabila cursor di arah kan pada gambar atau apabila cursor menyentuh gambar tersebut.
Untuk lebih jelasnya tentang tutorial Membuat Gambar Bergetar Menggunakan jQuery ini mari kita lihat demonya lansung, dan coba Anda sentuh gambar berikut ini dengan cursor komputer Anda.


Demo Gambar Bergetar Menggunakan jQuery







Membuat Gambar Bergetar Menggunakan jQuery

Bagaiman apakah Anda berniat membuatnya? berikut ini akan saya berikan kode untuk membuatnya!


The CSS


.img_OW{
position:relative
}


The HTML


<script src="http://otowebsite.googlecode.com/files/Getar.js.txt" type="text/javascript"></script>


Kode Pemanggil


<img class="img_OW" src="http://URL GAMBAR" onclick="top.focus()" onmouseout="stoprattle(this);top.focus()" onmouseover="init(this);rattleimage()" />

Keterangan: Ganti warna merah dengan URL Gambar Anda sendiri.


Dari Meja Editor

Finish, cukup sekian untuk kali ini, saya harap Anda suka tutorial Membuat Gambar Bergetar Menggunakan jQuery, jika ada pertanyaan tentang tutorial di atas jangan sungkan untuk bertanya saya akan berusaha secepatnya membantu Anda.

Poskan Komentar Blogger Disqus

  1. nice post gann!! makasih atas tutorial nya :)

    BalasHapus
  2. jika anda ingin belajar web dan download software game lagu video dan lainya kunjungi http://downloadcyber.byethost31.com

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top