Link Nudge using css3 and jquery blogger widget

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.

Link Nudge Using CSS3

Go to Blogger Account
Design -> Edit HTML
Find ]]></b:skin> and copy the below code BEFORE it

.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;
}

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>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

Step 2 :Adding jQuery script for Link Nudge

Sign In to your Blogger Account
Go to Design->Edit HTML
Find </head> and copy below code snippet BEFORE it

<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://netoopsblog.blogspot.com'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhE3sLT9w4OUh9JplzdR_EbwsKTM07lXtGQ-vIdzuGX_wTYbeU4O9E0K_wwEMRk1aZRPsanAVQ_t5J_zGlm4kubW9_XSy5gIVXWEzU467NcQOmddUblpqQ2X3515nLY29wimdSj6FeLjjk/s1600/1x1juice.png'/></a>

Save it

You can put link nudge effect to a link by adding a class noopln

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 linknudge css3 and jquery

Its almost finished,If you enjoyed this article share and like us.
a lot of other tips and tricks like how to add more blogger widgets, add social book marking baar, add new sidebar, add facebook lik box , post google adse inside or below the post title , google adse between post,Horizontal manu bar for blogger, image slider for blogger.Please keep wathcing www.bloggingtrainings.blogspot.com flash for blogger templates, and a lot of other tricks for blogger users.

Blogging Trainings