Cara Membuat Link Pada Label Bergeser Saat Disorot (Link Nudging)

[+] Post Title :

Cara Membuat Link Pada Label Bergeser Saat Disorot (Link Nudging)

[+] Date : 6/17/2011
[+] Author : Oktri darmadi
[+] Link : http://tipsbelajar-blog.blogspot.com/2011/06/cara-membuat-link-pada-label-bergeser.html
[+] Type : Accesoris Blog

Membuat tampilan Pada link Label saat disorot teks link bergeser-geser Contoh pada gambar disamping Teks Tutorial Blog Saat disorot bergeser ke samping..... Link Nudging adalah salah satu fasilitas dari jQuery yang memberikan effect pada link. Effect Link Nudging ini di kembangkan oleh David Walsh Blog,

Untuk cara membuatnya:
1. Silahkan login blogger, Rancangan, Edit HTMl,
2. Cari kode </head> lalu simpan kode berikut diatas kode tadi :

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

Jika kode tersebut sudah ada tak perlu disimpan lagi.


Selanjutnya simpan kode berikut Dibawah kode berwarna biru tadi JavaScript :

<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 -->

Yang berwarna Biru silahkan ganti sesuai keinginan anda

Simpan template.......

DEMO KLIK DISINI

Dalam pemakaian tutorial ini kadang tidak berhasil, semua itu bisa disebabkan bentroknya script jQuery yang dipakai...

Jadi selamat mencoba saja,,, semoga berhasil