Cara Membuat Efek Link Nudging Pada Label Blog - Trik dan Tips kali ini yaitu kita akan membuat Link Nudging dengan
menggunakan Jquery dan Javascipt. Efek link nudging ini membuat link
bergoyang dengan halus ketika mouse diarahkan diatas link tersebut. Efek
ini akan menambah keindahan dari blog anda. Link nudging kali ini kita
akan terapkan pada label atau kategori blog. Jika anda tertarik untuk
membuatnya ikuti langkahnya dibawah ini:
1. Masuk ke Rancangan--> Edit HTML
2. Cari kode </head>
3. Letakkan script dibawah ini diatas kode </head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>Keterangan: Kode Jquery diatas sudah umum digunakan, jadi jika template anda sudah ada kode tersebut tidak usah memasukan kode jquery diatas.
4. Tambahkan kode dibawah ini dan letakan dibawah kode jquery tadi:
<script type='text/javascript'>5. Simpan template anda lalu liat hasilnya.
$(document).ready(function() {
$('#Label1 li').hover(function() { //mouse in
$(this).animate({ marginLeft: '12px' }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script>
Jika anda ingin melihat link nudging bekerja pada label maka anda harus menambahkan widget (gadjet) label pada blog. Pilih Label dengan tampilan "Daftar". Selamat mencobanya!!
Tidak ada komentar