Cara Membuat Link Nudging Dengan jQuery

Cara Membuat Link Nudging Dengan jQuery. Sebenarnya masih banyak tips dan trik blogspot yang saya bookmark tapi belum sempat saya share disini, jadi kalau tips ataupun triknya udah ketinggalan jaman, harap dimaklumi saja ya. Kali ini saya akan membahas seputar jQuery, pastinya menarik untuk disimak dan dipraktekan sob, sobat pasti udah sering mendengar link nudging atau gampangannya yaitu sebuah link bila tersentuh kursor maka link tersebut akan bergeser kesamping kanan, bisa juga hover link yang bergerak.




Yowes, agar lebih jelasnya silahkan lihat demonya dibawah ini:

DEMO LINK NUDGING: Coba arahkan kursor ke arah link dibawah ini

• Tutorial Blog
• Blogger Trik
• Tips SEO
• jQuery
• Blogger Hack
• Blogger Widgets
• Alexa

Tertarik untuk membuatnya?? Berikut langkah-langkahnya:

1. Login ke akun blogger sobat
2. Masuk ke rancangan/design
3. Pilih Tata Letak
4. Edit HTML
5. Lalu cari kode berkut: </head> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diatas 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>

6. Sekarang simpanlah template sobat.

Penting:

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.


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

<a class='linknudge' href='http://kode-blogger.blogspot.com/'>Kode Blogger</a>

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

Keterangan:

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

Description: Cara Membuat Link Nudging Dengan jQuery
Reviewer: Viyan Pradita - Itemreviewed: Cara Membuat Link Nudging Dengan jQuery - Rating: 4.5