Recommended Article for you : get unlimited Freecharge Trick revealed

Link Nudge using css3 and jquery blogger widget

Link nudge with css3 and jquery to any links
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.
  1. Through CSS3 .
  2. With jQuery Effect.
Live Demo of Link nudge is following





Live Demo of Link nudge is following

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>
<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
<!--Netoops Link Nudge Start-->
<script type='text/javascript'>
var speed = 300; // Speed Of Animation
$(document).ready(function() {
$(&#39;a.noopln,#Label1 ul li a,.Label li&#39;).hover(function() {
$(this).animate({paddingLeft: &#39;13px&#39;}, speed);
}, function() {$(this).animate({paddingLeft: 0}, speed);
});
}); </script><a href='http://www.netoopsblog.com'><img src='http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png'/></a><!--Netoops Link Nudge End-->
  • 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.
Check out more Blogger Tips and Spice your blog tips
Close [x]

12 comments :

  1. Thanks for sharing your info. I really appreciate your efforts and I will be waiting for your further write ups thanks once again.
    html5 audio player

    ReplyDelete
  2. I tried to add Link Nudge Using CSS3, But its not worked in my blog. It shows the code above my Blog title. Nothing worked. So i decided to add Link Nudge Using JQuery. But first i want to know where i add Add jQuery plugin code ( First Code under Link Nudge Using JQuery). And How can i Find my blog have a jquery plugin or not?? See my blog - http://androidmarketguru.blogspot.in/

    ReplyDelete
    Replies
    1. First thanks for informing the bug.It didn't work with CSS3 because of the mistake in code..I corrected it.pls do it wit CSS3.
      Add jquery plugin under <head>.Ur blog already hav jquery plugin.

      Delete
    2. Thanks for your replay.. Your site is too helpful for new bloggers like me.. Keep rocking bro..

      Delete
    3. Keep visiting Sebin Thomas....Join Google friend connect and subscribe to e-mail n stay connected with us...

      Delete
    4. I tried with CSS3, But its not succeed. Anyway thanks. - Android Market Guru

      Delete
    5. Noo no no ,,its working 101%, i tested it..:)

      Delete
  3. thanks

    http://android2arabic.blogspot.com/

    ReplyDelete
  4. perfect, your code its work...i like!

    ReplyDelete

Ask your thoughts to us,We are happy to help you.


1.Please don't Spam
2.We strictly recommend to Click on Subscribe to email