How to Create a Link nudging Effect On Sidebar Lists By CSS Trick

How to Create a Link nudging Effect On Sidebar Lists By CSS Trick

5
data:blog.title
nudging effect

This is one the best way to add effect on sidebar of footer links. After adding nudging effect on sidebar you would see links are sliding right site after mouse over on them. Basically this widget will work on sidebar links of your blogger template. Hope you can add little animation by using this nudging effect on sidebar lists. This effect created completely by CSS coding. So don't worry about your template loading time. And very easy to install to your template. So let's proceed to the tutorial. 

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Click on -> Template -> Edit HTML

Step 3 Now Find this code </Head>  by pressing  Ctrl + F

Step 4 Paste the below code  Before/above </Head>  

<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery('.widget-content li a').hover(function() {
jQuery(this).animate({ paddingLeft: '10px' }, {duration:250});
}, function() {
jQuery(this).animate({ paddingLeft: '0px' }, {duration:250});
});
});
</script>

Customization

  • Change 10px with different value for peddling 
How to Create a Link nudging Effect On Sidebar Lists By CSS Trick
4 Stars stars - "How to Create a Link nudging Effect On Sidebar Lists By CSS Trick" This is one the best way to add effect on sidebar of footer links. After adding nudging effect...

Post a Comment

this is for blogroll my friend??

comeback

every link on sidebar and footer it will work. try it bro

awesome post, dude. Visitors will attract to click on it and ultimately our page view will get improved.. thanks

yeh this is partially true. but we can use it to make little animation on links.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *