1. Efek Warna-Warni Pada Link Saat di Hover
2. Efek Opacity atau Kabur Pada Link Saat di Hover
3. dan Efek Link yang Berjalan atau Nudging Saat di Hover
Efek Warna-Warni Pada Link Saat di Hover
Coba Lihat Semua Warna Link yang Ada di Blog http://.co.cc.Terus Perhatikan Warna Linknya Sebelum Kamu Hover, dan Perhatikan Lagi Warna Linknya Sesudah Kamu Hover.Pasti Efeknya Warnanya Warna-Warni, atau Kaya Pelangi Gitu...
Untuk Membuat Efek Warna-Warni Pada Link, Sederhana Banget Koq Langkahnya, Tinggal Letakkan Kode di Bawah Ini di Atas Kode ]]></b:skin>
<script src='http://densquare.googlecode.com/files/Efek%20Link%20Colour.js' type='text/javascript'/>
Efek Opacity atau Kabur Pada Link Saat di Hover
Contohnya, Buka Blog http://co.cc. Terus Lihat Semua Warna Link yang Ada di Blog Tersebut!Perhatikan Warna Linknya Sebelum Kamu Hover, dan Perhatikan Lagi Warna Linknya Sesudah Kamu Hover.Pasti Linknya Saat Kamu Hover Akan Memudar, Memudar Ini di Namakan Opacity...
Untuk Membuat Efek Opacity atau Kabur Pada Link, Tinggal Letakkan Kode di Bawah Ini di Bawah Kode <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js' type='text/javascript'/>
<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>
Efek Link yang Berjalan atau Nudging Saat di Hover
Contohnya, Arahkanlah Mouse Kamu Ke Beberapa Link di Bawah IniWah!, Keren Khan? Nah Untuk Membuat Link dengan Efek Ini, Ada Dua Langkah:
Pertama, Untuk Meng-Instalnya. Letakkan Kode Script di Bawah Ini, di Bawah Kode <head>
<script src="http://densquare.googlecode.com/files/Efek%20Link%20Nudging.js" type="text/javascript"> </script> <script type="text/javascript"> $(document).ready(function() { $('#linkberjalan li').mouseover(function() { $(this).children().animate({paddingLeft:"50px"}, {queue:false, duration:600}); }).mouseout(function() { $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:600}); }); }); </script>Kedua, dan Untuk Membuat Link Berjalan, Hanya dengan Mengubah Tulisan yang di Cetak Tebal dengan Ke Inginanmu, dan Letaknya Terserah, Sesuai dengan Ke Inginanmu.
<ul id="linkberjalan">Contoh:
<li><a href="http://AlamatLinkmu">Nama Linkmu</a></li>
</ul>
<ul id="linkberjalan">Ok, Semoga Ketiga Efek Hover Pada Link dengan Jquery di Atas dapat Bermanfaat Ya. Jangan Lupa Komentarnya Ya.
<li><a href="http://www.Rachmath.co.cc">Blognya Rachmath</a></li>
</ul>
Selamat mencoba
0 comments:
Post a Comment
Komen yang bijak sangat di nantikan...! Terimakasih..