Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

Add Link Nudge Effect To Blogger Using CSS3 And jQuery

by Durodola Ridwan | Sunday, September 16, 2012 | | 8 Comments

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>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
  • Now find </head> and paste the following code before/above </head>
<!--Link Nudge Effect By www.realcombiz.com-->
<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://realcombiz.com'><img src='http://1.bp.blogspot.com/-RikrI-c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png'/></a><!--Link Nudge Effect By www.realcombiz.com-->
  • 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>
  • Replace Your link here with the link you want to add and give it a title by editing Title here as highlighted above.

Hope you like this awesome link nudge effect? we like to hear your feedback, and share this post with friends/followers.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

8 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Well done! I am gratified that you have shared this important news with me. Thanks!
    open source developer

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Why it is inappropriate because just of her age ? Now bodybuilding is a international level competition and no problem you are male or female do anyone know effort and enthusiasm of this girl will attract first on country level then she will attract people at universal level & result will people will start struggle to get on international level at their youngest age. But if you need help regarding write an essay you can visit at our site we are ready to help you.

    ReplyDelete
  4. Having read such an awesome piece of writing I am very delighted, will come back soon to visit this webpage. Thanks recommended auto insurance deductibles

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger