Rabu, September 26, 2012

Cara Membuat Efek Link Nudging Pada Label Blog

Standard
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'>
$(document).ready(function() {
$(&#39;#Label1 li&#39;).hover(function() { //mouse in
$(this).animate({ marginLeft: &#39;12px&#39; }, 400);
}, function() { //mouse out
$(this).animate({ marginLeft: 0 }, 400);
});
});
</script>
5. Simpan template anda lalu liat hasilnya.

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!!

0 komentar:

Posting Komentar