Add Link Hover/Nudging Effect On Labels and Custom Links in blogger

Link nudging effect have attracted huge number of bloggers and visitors in a short span. This Link Nudging effect can create your links and images moving from left to right when you hover your mouse over them. This effect makes your links more attractive. Here i provide you  a code which provide nudging effect on all links. It makes your blog links to look more attractive.




Link Nudging Demo


Live Demo


How To Add jQuery Link Hover/Nudging Effect On Labels and Links to blogger

  • Go to Blogger Dashboard 
  • Click on DropDown Menu and select Template
  • Backup your Template before making any changes to your blog
  • Now Click on Edit HTML --> Proceed --> Expand Widget Templates
  • Press Ctrl + F and search the code shown below

</head>

  • Now Paste the Code shown below just before/above it

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'>
</script>
<script type='text/javascript'>
    var dur=400;$(document).ready(function(){$('a.linknudge, .Label ul li a').hover(function(){$(this).animate({paddingLeft:'25px'},dur)},function(){$(this).animate({paddingLeft:0},dur)})});
</script>

  • Now save your template
  • If your template already contain <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script> then there is no need to add this script

Like it? Share it.

No Comments

Click to Add a New Comment

  • If you're asking a question click on Subscribe By Email link, on the comment form, to be notified of replies.
  • Do NOT add links to the body of your comment as they will not be published.
  • Only the comments posted in ENGLISH will be approved.
  • If you have a problem check first the comments , maybe you will find the solution there.

Subscribe to: Post Comments ( Atom )