Cara Membuat Efek Hover

\ \ 8 comments
Pada kesempatan kali ini saya ingin berbagi trik untuk memberi efek hover pada blog. Efek hover ini berlaku untuk gambar dan link sobat pada blog, tetapi berbeda dari efek hover bawaan template. Sedikit contoh ini adalah efek hover pada foto:
Foto Anak SMKN 1 Jenangan

Sedangkan ini efek hover pada link:

Untuk memberi efek hover ini silahkan ikuti petunjuk di bawah ini:
1. Seperti biasa login ke akun Blogger sobat.
2. Masuk tab Rancangan.
3. Pilih tab Edit HML.
4. Jangan lupa centang Expand  Template Widget.
5. Cari kode  </head>.
6. Sisipkan script berikut sebelum kode di atas.
<script type='text/javascript'>
$(document).ready(function() {
$(&#39;a&#39;).hover(function() { //mouse in
$(this).animate({ opacity: &#39;0.3&#39; } , 1000);
}, function() { //mouse out
$(this).animate({ opacity: &#39;1&#39; }, 1000);
});
});
</script>
 7. Simpan template sobat.
 Silahkan lihat hasilnya jika ada masalah jangan sungkan untuk berkomentar.

UPDATE: Maaf ternyata setelah saya teliti script diatas belum lengkap, mohon maaf atas ketidaknyamanannya. Sekarang untuk bisa menggunakan efek hover ini tambahkan script berikut dibawah </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'></script>

8 comments:

  1. waww..
    info nya sangat bermanfatt untuk saya
    dan yg lain nya
    semoga sukses selalu ya mas bro

    BalasHapus
  2. oke,,,terima kasih sob jangan bosan tuk berkunjung ya..

    BalasHapus
  3. udah ane pasang tpi gak jalan cuy,,,
    coba cek tkp >> http://mynameiskurt.blogspot.com/

    BalasHapus
  4. Oke sob....Langsung ke TKP..

    BalasHapus
  5. keren sob ,semoga sukses selalu ya

    BalasHapus
  6. thank.banget buat tutornya

    BalasHapus