Efek Link Bergoyang / Nudging

Demo:

Cuba korang lalukan cursor pada mana-mana link dalam blog ni, apa jadik? ada goyang tak? :) efek menarik ni korang boleh cuba apply dekat blog masing-masing.. kalau berminat la, kalo tak berminat jangan paksa diri ok,he2..caranya:

1) Sign in akaun blogger

2) Dashboard >> Design >> Page Element >> Add A Gadget >> Html / Javascript

3) Copy dan paste kod di bawah pada ruang Html / Javascript tadi:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'></script><script type='text/javascript'> $(document).ready(function() { $('a').hover(function() { $(this).animate({ marginLeft: '10px' }, 400); }, function() { $(this).animate({ marginLeft: 0 }, 400); }); });</script>
400 - speed / laju efek nudging. Korang boleh adjust nilai ni untuk kelajuan efek, lagi kecik nilai, lagi laju efek goyang.

4) Lastly macam biasa, klik save dan lihat hasilnya.

Selamat mencuba! :)

13 comments:

  1. dah dapat dah..tp , nak bg rama2 tu mcm mne eh ?

    ReplyDelete
  2. @Miss 17 rujuk tuto ni ye http://jombinabelog.blogspot.com/2011/12/efek-animated-image-apabila-cursor.html

    ReplyDelete
  3. @Baby Yana Chubby refer tutor ni http://jombinabelog.blogspot.com/2011/12/cara-letak-shoutbox.html

    ReplyDelete
  4. Thankyou yak! :))

    ReplyDelete
  5. thankz ye...byk tutorial yg saya cari,,tp ada yg tak menjadi hehe,,tk pe la jnj simple je,,,:>

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. Tutorial yang singkat, padat, jelas, dan sangat bermanfaat Sobat. Oh ya, bila berkenan silakan kunjung ke blog saya ya. Dan tidak lupa saya sampaikan salam kenal serta salam berbagi. :)

    ReplyDelete

Komen kat sini ye.. ^_^