Selasa, 15 Juni 2010

Memberi Link Hover Dengan Jquery

Memberi Link Hover Dengan Jquery- Link hover dengan jquery?,, hmm gimana ya.,..? Ya tentunya efek hover yang diberi jquery . Tapi apakah efek hover itu sendiri ? Efek hover adalah efek yang muncul apa bila pada suatu halaman terdapat Back link/ tulisan/gambar yang akan menjurus ke link lain,. Udah jelas belum tentang link hover ? nah sekarang kita bahas tentang
link hover dengan jquery. Agak sulit njelasin yang pake jquery. Enaknya .,coba arahkan cursor anda ke judul postingan blog ini. Wingwing-wing,, efek hover dengan jquery akan ber aksi.,.,. Kelihatan kan klo yang pake jquery lebih cool dari pada link hover biasa,. Nah bagus kan link hover dengan jquery nya ??. 
 Udah ndak sabar ??? ya udah , nih cara-cara memberi link hover dengan jquery.. :

  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.

DEMIKIN DULU YA..., Tentang memberi link hover dengan jquery.. klo ada tidak keberhasilan mohon komen / tanya...

Anda tertarik dengan artikel kami? Mau berlanganan artikel menarik setiap bulan ?. Gratis!

untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di ajinoor.blogspot.com Dan semoga dengan ada layanan ini, anda bisa lebih betah dan lebih cinta dengan Ajinoor. Terima Kasih
Masukan Alamat email Anda


Artikel Terkait:

COMMENTS :

Don't Porn,Don't Spam Here Kurang Jelas Dengan Artikel Di atas ?? Silahkan Bertanya Lewat Komentar Ini Insyaallah Saya akan Segera Membalas (Komentar Yang Berbau Kotor Dan Pornografi Akan Segera Di Hapus tanpa sepengerahuan ANDA)

17 Komentar to “Memberi Link Hover Dengan Jquery”

ini dia, aq mo pake juga ah, blog qu baru 1 hari, kemarin sore buatnya :D jdi masih dalam perbaikan

Wildan mengatakan...
on 

waaah bagus jadi pingin coba nich.
kunjung balik yaaa

CongCot mengatakan...
on 

makasi kawan atas info'a...

AZ COMSOFT mengatakan...
on 

wah bagus juga ini, tapi pake jquery, kayaknya berat juga...

Arham Sukardi mengatakan...
on 

nggak terlalu mas,, kalou emank masih sangat berat kan juga bisa di kompres.,, dan asal jquerynya nggak terlalu banyak

Aji Nur Sanyoto mengatakan...
on 

Waw. . .
Tambahan ilmu Felix dapatkan dari sini

d.coba dlu kang :D

Coretan Felix mengatakan...
on 

J Query Yang nemuin pertama kali sapa ya? nah lo bisa jawab?

Ikhsan Hafiyudin mengatakan...
on 

wiiii pengetahuan ku blom nyampe situ mas,.., tp ntar klo aku tahu aku jawab dech.,.

Aji Nur Sanyoto mengatakan...
on 

manta ini tutornya Ji
aku mau coba dulu di blog
baruku semoga bermanfaat..

Fadel I-om mengatakan...
on 

yaa.,., semoga berhasil ya Del.,.,

Aji Nur Sanyoto mengatakan...
on 

nice trickk

riFFrizz mengatakan...
on 

wah makasih infonya, salam sukses


a-One jambi

informasi jambi mengatakan...
on 

nice info.,.,. ayo saingan nen google tentang artikel ini.,.,

o'o mengatakan...
on 

Info yang bagus sobat.......

ariel mengatakan...
on 

wah bagus nich mas, cantik juga hasilnya ;)

arifudin mengatakan...
on 

kayanya pake CSS bisa kan..?

secangkir teh dan sekerat roti mengatakan...
on 

saya tp belom pernah liat yang pake css,,, apakah sama?? agaknya apa nggak lebih berat ??

Aji Nur Sanyoto mengatakan...
on 

Poskan Komentar

Ayooo Bnnyak-Banyak BERkomentar....
Jangan Hanya baca.. Bila Anda Paling
banyak KOMNETAR anda akan Dapet Back LInk GRATIS!!

 

Copyright © 2009 ajinoor | .blogspot | .co.cc | All is my Site | Modifed ByNoorsificationetwork '12