20 Mei 2010

Penerapan Link Nudging di Blogger Template

link nudging

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.

Artikel Terkait di Bawah posting
Blogger
Tips N Triks

Diposting oleh KD JON'S di 19.29

Label: , ,

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

LOGIN

Template by : JON'S