Cara Membuat Link Nudging Dengan jQuery

Cara Membuat Link Nudging Dengan jQuery. Halo sobat-sobat vikrymadz apa kabar?? baek" kan?? nih Blogging Is My Life kali ini akan share mengenai Cara Membuat Link Nudging Dengan jQuery.

Mungkin banyak dari sobat yang belum tahu tentang link nudging. link nudging adalah sebuah link bila tersentuh kursor maka link tersebut akan bergeser kesamping kanan, bisa juga hover link yang bergerak.


yuk mari kita lihat cara membuatnya

Cara Membuat Link Nudging Dengan jQuery
1. Login Blogger
2. Rancangan >> edit HTML
3. Lalu cari kode </head>  (gunakan Ctrl+F)
4. Lalu Letakkan kode dawah ini tepat di atas kode </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 400; // Duration Of Animation in Milli Seconds
$(document).ready(function() {
$('a.linknudge').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script>

5. Simpan

NB :
Bila di blog sobat sudah ada file.js untuk kode:

http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js

Maka sobat tidak perlu lagi memasang file.js tersebut.

6. Cara memasang di link sobat cukup tambahkan kode class "linknudge" untuk link sobat seperti contoh dibawah ini:

<a class='linknudge' href='http://vikrymadz.blogspot.com/'>Blogging Is My Life</a>

7. Selesai

Nah cara atau kode di atas adalah untuk link kostum, dengan menambahkan kode class 'linknudge'.
Berikut ini adalah kode lain untuk label dan untuk link kustom sobat:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
var dur = 400; // Duration Of Animation in Milli Seconds
$(document).ready(function() {
$('a.linknudge, .Label ul li a').hover(function() {
$(this).animate({
paddingLeft: '25px'
}, dur);
}, function() {
$(this).animate({
paddingLeft: 0
}, dur);
});
}); // end of Jquery Script
</script> 

Untuk pemasangan kode sama seperti yang sudah saya jelaskan diatas.
Sekian dari saya, itulah Cara Membuat Link Nudging Dengan jQuery.