memberi efek link j query yang lebih unik

uhh sudah banyak yang udah pasang efek link hover jquery ya!!!! tapi ini versinya beda dengan tampilan yang unik dan asik caranya
1. Login blogger anda

2. Rancangan >>Edit HTML>>Jangan lupa explain widget

3. Lalu masukan code jquery ini diatas </head>

<script src='http://jqueryui.com/latest/jquery-1.3.2.js' type='text/javascript'></script>

4. Selanjutnya masukkan kode javascript berikut, tepat dibawah kode jQuery tadi.

<script type='text/javascript'>
$(document).ready(function() {
$('a').hover(function() { //mouse in
$(this).animate({ opacity: '0.3' } , 1000);
}, function() { //mouse out
$(this).animate({ opacity: '1' }, 1000);
});
});
</script>

5. SAVE DAN SELESAI...,.
CATATAN :
- Untuk code jquery pada langkah ke-1, apabila anda sudah mempunyainya tidak perlu dipasang lagi.
- Pehatikan pada langkah ke-2. Lihat code yang berwarna merah, itu adalah kata kunci untuk penggunaan efek link hover jquery ini. Anda bisa merubahnya sesuai keinginan, seperti code h1, sidebar, dll. Jangan lupa pastikan di kode CSS anda memiliki kode 'a' tersebut seperti dibawah ini :

a { outline: none;}
a:link { color:#303030; text-decoration:none;}
a:hover { color:#B13E2C; text-decoration: none;}
a:visited {color:#B13E2C; text-decoration:none;}
a:active { color:#007168; outline: none;}

- Angka 0.3 dan 1000 diatas pada kode javascript dapat anda rubah sesuai selera, angka tersebut yang memberikan efek pada link hover anda.
- kode 'opacity' diatas juga anda dapat rubah dengan 'color' dan 'padding', tergantung selera anda.
- Usahakan tidak menggunakan font bold untuk link, karena untuk IE tidak bekerja sempurna.

Artikel yang berkaitan