Membuat Link Nudging

Membuat Link Nudging. Pada kesempatan sebelumnya saya telah memberikan Trik untuk Membuat Efek Link Dengan Jquery. Nah pada kesempatan kali ini saya juga akan menjelaskan hal yang sama seperti trik sebelumnya, namun pada kesempatan ini efek linknya berbeda dengan efek link yang sebelumnya. Kalau yang sebelumnya efek dari linknya yaitu apabila link di sentuh maka link tersebut akan redup nah kalau sekarang efeknya bergelombang seperti ombak, tetapi sama efek ini akan bekerja apabila link tersebut disentuh oleh kursor.

mungkin dengan trik ini blog sobat akan terlihat lebih cantik dan keren , soalnya efek ini bisa dibilang efek yang bagus untuk blog . Selain tidak terlalu memberatkan blog Membuat Efek Link Nudging ini juga bagus untuk mempercantik tampilan blog sobat. Untuk melihat Demo dari efek ini sobat bisa melihat disini (lihat disebelah kiri). Sekarang kita langsung saja yuk ke langkah pembuatannya.

1. Seperti biasa login ke blogger
2. masuk ke Tata Letak => Edit HTML
3. setelah itu cari kode </head> lalu tambahkan kode di bawah ini tepat di atasnya. (catatan : kalau sudah memilik kode di bawah ini, sobat tidak perlu menambahkannya lagi)
   
   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
   
   
4. setelah itu tambahkan kode di bawah ini tepat di bawah kode di atas
   
   <script type='text/javascript'>
   $(document).ready(function() {
   $(&#39;#Label1 li&#39;).hover(function() { //mouse in
   $(this).animate({ marginLeft: &#39;12px&#39; }, 400);
   }, function() { //mouse out
   $(this).animate({ marginLeft: 0 }, 400);
   });
   });
   </script><!-- end LinkNudging -->
   
   Penjelasan :
   
   • Label1 => perintah untuk memberikan efek pada label, sobat dapat menggantinya dengan mengambil ID dari widget yang ingin di berikan efek ini
   • marginLeft => memberitahu bahwa efek ini bergelombang dari kiri ke kanan, ini juga dapat sobat ganti dengan marginright (bergelombang ke kanan), magrintop (bergelombang ke atas), dan magrinbottom (bergelombang ke bawah).
   
   
5. Setelah itu sobat dapat menyimpannya dah melihat hasilnya.

Bagaimana keren kan efek ini? kalau efek ini tidak berhasil sobat dapat mengganti Label1 dengan ID widget lainnya yang ingin diberikan efek link nudging. sekarang saya pamit dulu . Terima kasih dan Happy blogging .

Bagikan Artikel : Facebook Twitter Google+ Linkedin Technorati Digg