Link Hover Dengan Jquery

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

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


                                                             PERHATIAN !!!
                                     JIKA ADA KERUSAKAN ATAU TIDAK BISA DI PASANG MOHON TANYA /KOMEN,,,KARENA TIDAK SEMUA TEMPLATE YANG COCOK