Link Hover Dengan Jquery

 

BAGAS BLOG - Hi konco-konco sedoyo kali ini saya menerbitkan Blog tutorial saya yang ke 2. Kali ini saya akan memberikan tips tentang Link Hover dengan jquery,emang saya sengaja untuk menerbitkan artikel tentang jquery. Habisnya asyik sih, setelah kalian membaca artikel tentang back to top dengan jquery,sekarang saya akan membahas tentang link hovernya nih,.,. Bagi kalian yang belum tau tentang link hover jquery, coba kalian arahkan point ke judul postingan atau yang berhubungan dengan link. Apa yang terjadi? Ya seperti itulah link hover dengan jquery,


   Dari pada saya banyak cingcong mending langsung aja deh berikut tutorialnya:::


    1. Pertama tentu kalian harus login blogger dasbor kalian terlebih dahulu

    2. Lalu ke bagian edit HTML , sebelum utak utik template ada baik nya kalian men Download   Template lengkap dulu.

    3. Masukkan kode jquery ini di atas </head>

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

4. Selanjutnya masukkan kode di bawah ini tepat di bawah 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>

Lalu Save Template

CATATAN:


- 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;} 

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


CATATAN:
JANGAN LUPA TINGGALKAN COMENTNYA YA