Blog Mbahyar

Cara Membuat Link Nudging Dengan jQuery. Sebenarnya ada banyak tips dan trik yang saya bookmark blogspot tapi saya belum punya waktu untuk berbagi di sini, jadi jika tips atau trik yang sudah usang, mohon mengerti, ya. Kali ini saya akan membahas tentang jQuery, tentu menarik untuk mengamati dan mempraktekkan sob, teman saya pasti sudah sering mendengar menyenggol atau link Gampangannya adalah link ketika kursor bergerak maka link tersebut akan bergeser kesamping kanan, juga bisa hover link yang bergerak.

Tertarik padanya? Berikut adalah langkah-langkahnya:

1. Login ke blogger sobat

2. Masuk ke design / desain

3. Pilih Tata Letak

4. Edit HTML

5. Kemudian melihat kode berkut: </ head> (gunakan Ctrl + F pada keyboard Anda sob), setelah bertemu untuk tetap menaruh kode berikut CSS tepat di atas </ 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 simpan template anda.

Penting:

Jika blog Anda tidak dalam file.js kode:

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

Jadi sobat tidak perlu menginstal file.js.

7. Bagaimana untuk dimasukkan ke dalam link Anda hanya dapat menambahkan kode kelas "linknudge" untuk link sobat seperti contoh di bawah:

<a class='linknudge' href='http://mbahyar.blogspot.com/'> Mbahyar | Tutorial Blog | SEO Blog </ a>

8. Selesai!

Nah cara atau kode di atas adalah untuk menghubungkan kostum, dengan menambahkan kode kelas '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 yang sama seperti yang saya jelaskan di atas.

Sekian dari saya, yang menyenggol Cara Membuat Link Dengan jQuery, Semoga bermanfaat.