Efek Link Nudging dengan jQuery

Yah sekarang saya akan coba share tentang link nudging dengan jQuery, trik ini memang udah lama, tapi yah gpp lah, belajar kan gag kenal waktu, hehehehe .

langsung ajah yah sob,

Link 1
Link 2
Link 3
Link 4
Link 5
Link 6

mau coba efek link kyak gitu ?

caranya gini,

1. Masukan script jQuery berikut diatas </head> :


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


nb : kalo udah punya script di atas, gag usah dtambah lagi .

2. Masukan kode Javascript berikut dibawah script jQuery:

 

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
$('a.nudge').hover(function() { //mouse in
$(this).animate({ paddingLeft: '20px' },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
//]]>
</script>

3. Penggunaannya :

Tambahkan class='nudge' pada link yg ingin diberi efek nudging .

jadi kira2 begini
<a href="http://granoblog.blogspot.com/" class="nudge">Link 1</a>

nb : a.nudge adalah perintah untuk memberikan efek nudging, karena bnyk penggunaan di bagian label, sobat bisa mengganti a.nudge jadi #Label1 atau dengan perintah lain, .sidebar a, .menu li, .post-body a, .post h3 a, #middle a, #footer a .

sobat juga bisa memasukan semua perintah.. sperti ini, 

$('.menu li, .post-body a, .post h3 a, #middle a, #footer a')

kalo a.nudge sobat ganti, gag perlu lagi nambahin class='nudge' pada link

yah sekian dulu semoga bermanfaat ..