Kali ini
kembali saya akan memberikan penjelasan kepada temen-temen dalam memodifikasi
tampilan link di blog. Jika sebelumnya saya sudah pernah posting membuat
efek pelangi link, kali ini saya akan menjelaskan cara menambahkan efek
jQuery nudging link. 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.
Untuk contoh dari efek jQuery
nudging ini bisa anda lihat disini. Klik
salah satu label yang ada pada sidebar blog demo itu. Jika temen-temen
tertarik, langsung saja saya akan berikan penjelasannya :
- Login ke blogger dengan akun anda
- Kemudian pada dasbor klik Rancangan >> Edit HTML
- Tambahkan Script JQuery berikut diatas kode </head>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
Catatan : Jika anda sudah memasukkan script JQuery
diatas, langkah ketiga bisa anda abaikan
- Setelah itu tambahkan lagi script berikut dibawah script JQuery tadi:
- <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><!-- end LinkNudging -->
- Terakhir Save Template anda, dan lihat hasilnya
Itu tadi tutorial kali ini, jika ada pertanyaan
teman-teman bisa isi kotak komentar di bawah. Selamat mencoba dan semoga
bermanfaat
0 Comments
