CSS3 and jQuery have really done great in blogging perspective in terms of adding cool effect to blog/site. Adding link nudge effect to your blog is another cool way of spicing up your blog with great effect which will attract new visitors and turn them to regular visitors.

The Links below is an example of link nudge, hover your mouse on any of the link and see what we are talking about.

Blogger Tips
Blogger Widgets
Social Widgets
SEO Tips
CSS
jQuery

This effect can be added to a blog in two ways, is either you follow the CSS method or jQuery method. The two procedure is analyze below.

Link Nudge Using jQuery

Go to your blogger dashboard
Click on "Design" > "Edit HTML" > back up your template
If you haven't add jquery plugin, then add the code below after <head>

Now find </head> and paste the following code before/above </head>

<script type='text/javascript'>
var speed = 300; // Speed Of Animation
$(document).ready(function() {
$('a.noopln,#Label1 ul li a,.Label li').hover(function() {
$(this).animate({paddingLeft: '13px'}, speed);
}, function() {$(this).animate({paddingLeft: 0}, speed);
});
}); </script><a href='http://realcombiz.com'><img src='http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png'/></a>

If you don't wish to add link nudge effect to labels, then remove ,#Label1 ul li a,.Label li as highlighted above, and click SAVE TEMPLATE.
When you want to add link nudge in post, simply shift to "Edit HTML" mode in your post editor and paste the code below to where you want to add the effect.

<a class="noopln" href="Your link here">Title here</a>

Replace Your link here with the link you want add, and give it a title by editing Title here.

Done!

Link Nudge Using CSS

Go to your blogger dashboard
Click on "Design" > "Edit HTML"
Use ctrl F to find ]]></b:skin> and paste the following code above/before ]]></b:skin>

.noopln {
-moz-transition: all 0.1s ease-in 0s ;
-webkit-transition: all 0.1s ease-in 0s ;
-o-transition: all 0.1s ease-in 0s ;
}

.noopln:hover {
margin-left: 12px;
}

If you wish to add link nudge effect to labels, then add the following code above/before ]]></b:skin>

.noopln,Label li,#Label1 ul li a,.Label li a {
-moz-transition: all 0.2s ease-in 0s ;
-webkit-transition: all 0.2s ease-in 0s ;
-o-transition: all 0.2s ease-in 0s ;
}

.noopln:hover,Label li:hover,#Label1 ul li a:hover,.Label li a:hover {
margin-left: 14px;
}

Click "SAVE TEMPLATE" and you are done.
When you want to add link nudge effect in post, simply switch to "Edit HTML" mode in your post editor and paste the following code to where you want to add the effect.

<a class="noopln" href="Your link here">Title here</a>