Penerapan Link Nudging di Blogger Template

Demo

Link Nudging adalah salah satu fasilitas dari jQuery yang memberikan effect pada link. Effect Link Nudging ini di kembangkan oleh David Walsh Blog, yang kali ini akan diterapkan pada blogger template, tepatnya pada Widget (gadget) Label Blogger di sidebar (sebelumnya lihat Labels (DEMO Link Nudging), di sidebar).

Tahapan Penerapan Link Nudging di Blogger Template pada Widget Label

Sebelum melakukan tahapan ini, anda harus memasang Widget Label, dan Tag Posting di blog anda.

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

:: catatan jika telah memiliki script jQuery di template anda, maka script ini tidak diperlukan lagi.

2. Masukan kode Javascript berikut dibawah script jQuery:

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

:: Catatan:
- Kode '#Label1' diatas adalah perintah untuk memberikan effect pada Label. Kode '#Label1' ini dapat anda rubah atau tambah untuk memberikan effect pada link lainnya.
- Kode 'marginLeft', adalah effect gerak kekiri link tersebut, ini pun dapat anda rubah sesuai selera anda (lihat: Link Hover Animasi dengan jQuery).

3. Save, selesai.

:: Lihat juga: Menu Navigasi Vertikal dengan Efek Jquery

Posted in: jQuery,Penerapan jQuery