This is a Simple Link nudge Effect tutorial.You can add this to links in your Blog.While Mouse over the link a simple animation works.This can be done through two methods.You can use any one of these.
Through CSS3
With jQuery Effect.
Live Demo of Link nudge is following
Live Demo of Link nudge is following
- Blogger Widgets
- Blogger Tips
- Increase Traffic
- Page Navigation
- SEO
- Blogger Hack
- Widget Generators
Link Nudge Using CSS3
- Go to Blogger Account
- Design -> Edit HTML
- Find ]]></b:skin> and copy the below code BEFORE it
a.noopln {
-moz-transition: all 0.1s ease-in 0s ;
transition: all 0.1s ease-in;
-webkit-transition: all 0.1s ease-in 0s ;
-o-transition: all 0.1s ease-in 0s ;
}
a.noopln:hover {
margin-left: 12px;
}
- Save it.
- If you want link nudge effect to a link add class noopln to each link
Eg: <a class="noopln" href="http://blogger.com">Blogger</a>If you want this Link Nudge Effect to labels follow the steps below
- Go to Design->Edit HTML
- Find ]]></b:skin> and copy the following code BEFORE it
.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;
}
- That's all the Link Nudge with CSS3
Link Nudge using jQuery
Step 1: Add jQuery plugin (if your blog have a jquery plugin,ignore this step)- Go to Template->Edit HTML
- Copy and paste the below code <head>
Step 2 :Adding jQuery script for Link Nudge<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
- Sign In to your Blogger Account
- Go to Design->Edit HTML
- Find </head> and copy below code snippet BEFORE it
<!--Netoops Link Nudge Start-->
<script type='text/javascript'>
var speed = 300; // Speed Of Animation
$(document).ready(function() {
$('a.noopln').hover(function() {
$(this).animate({paddingLeft: '13px'}, speed);
}, function() {$(this).animate({paddingLeft: 0}, speed);
});
}); </script><a href='http://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_rZsLRl_njZ4OiP4ucrF0DGUCR1z-f2yrXrZLGcQWY2OBd2I159QeOIJPkw4aHuSFtW2KNDOveEwluXEn3AmSv_JpLJ-4QS4U7n1gsrk5_4ARgMpJNAbwKuzMvrXBBc9PqJIWZmQz0Ho/s1600/1x1juice.png'/></a><!--Netoops Link Nudge End-->
- Save it
Eg: <a class="noopln" href=" ">Your Link</a>
If your link already have a class then add this class after a space.
Eg: <a class="anotherclass noopln" href=" ">Your Link</a>
The above jQuery code snippet is also work with your Labels,If you don't need Link Nudge effect to your labels then delete the red blinking highlighted code in it.
And Save the Template 
Its almost finished,If you enjoyed this article share and like us.Check out more Blogger Tips and Spice your blog tips