Jumat, 27 Maret 2009

Link Hover Animasi dengan jQuery

10.14  syarif abdur rohman  No comments

link hover animasi

Jangan biarkan blogger (blogspot) tertingal pengembangannya dengan WP, Joomla, Drupal, dan lainnya. Blooger juga mesti diberi sentuhan animasi dengan memanfaatkan fasilitas jQuery.

Kali ini saya ingin memberikan tutorial membuat Link Hover Animasi dengan jQuery. Tapi sebelumnya jika anda ingin melihat penggunaan Link Hover Animasi dengan jQuery dapat dilihat di blog ini jQuery in Blogger Template, dengan mengarahkan mouse anda ke setiap link yang ada termasuk link menu, lihat perubahan warnanya.

Jika anda tertarik, demikian tahapannya:

1. masuk ke edit HTML, kemudian masukan script jQuery ini dibawah <head> atau sebelum </head> (tidak perlu di upload ketempat hostingan lagi, karena script ini kita dapat dari google) :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'></script>


atau bisa juga menggunakan alamat script ini:

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

2. kemudian masukkan kode javascript berikut, tepat dibawah kode atau script 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>

3. perhatikan kode 'a' (berwarna merah diatas), itu merupakan kunci untuk mengaktifkan fungsi animasi, jadi 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;}

Jika tidak ada, ganti kode 'a' tersebut dengan kode link yang anda miliki, atau kode yang anda miliki di rubah dengan menggunakan 'a'. Kode 'a' itupun anda dapat rubah, misal hanya ingin mengaktifkan link di sidebar, maka gunakan kode link sidebar yang anda gunakan.

4. Apabila tahapan diatas sudah terpenuhi, langsung klik 'save template', kemudian coba lihat blog anda dan arahkan mouse anda kesetiap link yang anda miliki.

5. Angka 0.3 dan 1000 diatas pada kode javascript dapat anda rubah sesuai selera, angka tersebut yang memberikan efek pada link anda.

6. kode 'opacity' diatas juga anda dapat rubah dengan 'color' dan 'padding', tergantung selera anda.

7. Usahakan tidak menggunakan font bold untuk link, karena untuk IE tidak bekerja sempurna.

Demikian tahapan pembuatan Link Hover Animasi dengan jQuery , semoga bermanfaat, dan terus berkreasi untuk pengembangan blogger (blogspot).

nb, artikel ini diadobasi dari:
1. jQuery Random Link Color Animations
2. jQuery Link Nudging
3. MooTools Link Nudging

Posted in: ,

0 comments:

Posting Komentar

Twitter Delicious Facebook Digg Stumbleupon Favorites More