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

Comments: 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 

Speak Your Mind

this is for blogroll my friend??

comeback

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

Oooowesome post bro i like it.....

Regards:
MyBloggingClub-TechAva-GetUtilities-FabTheme-JustinBieberPoint thanks.

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 Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

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 *