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
Bagikan :
+
Previous
Next Post »
34 Komentar untuk "Link Hover Dengan Jquery"

pertamax.,.,saya ambil alih pimpinan

waaah hebat, jadi pingin cepet2 nyoba niiich

Sedang musimnya jquery ya. Banyak blogger yang membahasnya.

Salam ukhuwah

@ BeDa >>iya mas ,.,.,saya juga seneng dengan fasilitas jquery.,.,

@ congcot>>silahkan coba.,.,

ada demonya gak?? gw pengen liat hasilnya dulu...

utl link hover saya suka standart :)
link lin seperti ini kalaudimodif terlalu jadi malah bisa tidak diketahui pengunjung
apalagi mereka aksesdari banyak bropwser banyak media seperti juga handphone
jadi menuerut sya utk link cukup cssnya saja yg dimodif

iya mas.,.,.,saya terima masukkan nya.,.,

aq g mudeng aq masih blo'on hehehe

@Adib ya gpp kawan kita sama2 blajar kok

@ ega: secangkir teh dan kopi>>gmn maksunya??

Ditunggu posting berikutnya. Saya suka membaca tutorial, termasuk tentang jQuery

Salam ukhuwah

blog q dah berat bgt sob dah kebanyak js, keren juga sebenarnya, d tunggu coment dan follow baliknya jika berkenan

@ rizky>> blognya yang namanya apa??

@ alf>>oh ya kang .,.,makacih dah mampir ya.,.,.

JQ mang keren tp blog q dah berat dah kebanyakan JS sob

ntar masih belom jelas he he pemula :(

@ utari >> iya sob .,.,saya ya juga pemula kok .,.,gpp.,.,

@ harizan >iya sob moga manffat ya.,.

@ adib >> ya sob silahkan coba.,.

woww sob .. tutorial nya bagus sob ... ane langsung coba nih sob .............

wah,, keren banget bro.. harus dicoba..

keren SOb ^^ Aku mau posting juga ahh kek gini ^^

Ayoo Jangan Hanya Baca Aja, Jika Anda Adalah Komentator Terbaik, Anda akan mendapatkan Backlink Gratis!!
~~~~~~NO SPAM PILISSS~~~~~~

 
Template ReDesigned By ojioo Blog
Back To Top