JQuery link nudging adalah effect animasi pada link hasil dari penambahan padding kiri, effect ini akan nampak saat kita menyentuhkan pointer/mouse pada link, link akan bergerak kekanan atau bergoyang. Contoh pengaplikasian ini bisa anda lihat pada Halaman Daftar Isi Dapur Tutorial Blogspot.
Berikut Langkah-Langkah untuk membuat Link Nudging Di Blog.
- Login kehalaman blog
- Silahkan masuk kehalaman Edit HTML dengan cara, pada bagian Dasboard pilih Template -->Edit HTML -->Teruskan/Proses ( Baca Cara Lengkapnya mengakses halaman Edti HTML)
- Jangan Lupa Download Template Lengkap Terlebih dahulu untuk antisipasi kesalahan dalam edit HTML ( Baca Cara Upload dan Back-up template Blog)
- Setelah masuk halaman Edit HTML Cari Kode </head>
- Sudah ketemu tambahkan kode berikut diatas kode </head>
- Sekarang Klik Simpan Template
- Selesai dan lihat Hasilnya
<script type="text/javascript" src="http://dapurtutorial.googlecode.com/files/Linknudging.js" ></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#Label1 li').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script>