News Update :
Home » , » [TUTORIAL] Menambahkan Effect JQuery Link Nudging Pada Tabel

[TUTORIAL] Menambahkan Effect JQuery Link Nudging Pada Tabel

Penulis : rierie_destiny on Saturday 16 April 2011 | 14:30

JQuery link nudging adalah effect animasi pada link hasil dari penambahan padding kiri, effect ini akan nampak saat kita menyentuhkan pointer/mouse pada link, link akan bergerak kekanan atau bergoyang. Bisa di lihat contohnya di sini. Untuk anda yang mau mencobanya,  ikuti langkah2 berikut :

1. Sign in di Blogger

2. Klik Dasbor→Klik Rancangan / Design→Edit HTML

3. Tambahkan Script JQuery berikut diatas kode
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>


Catatan: abaikan langkah ketiga untuk elduerz yang sudah menginstal script JQuery diatas pada template bloggernya.

4. Tambahkan lagi script berikut dibawah script JQuery tadi:
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;#Label1 li&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script><!-- end LinkNudging -->


5. Simpan, dan lihat hasilnya.

Semoga berhasil dan bermanfaat...;)

source : David Wals
cr : amatullah83.blogspot.com
shared bykoreanindo-zone.blogspot.com
Share this article :

Post a Comment

 
Design Template by panjz-online | Support by creating website | Powered by Blogger