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

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 
Open Comment Box
Anonymous 6/08/2013

this is for blogroll my friend??

comeback

Mohammad Fazle Rabbi says: 6/08/2013

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

Seikh Arslan Afzal says: 6/09/2013

Oooowesome post bro i like it.....

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

Umesh Tarsariya says: 6/12/2013

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

Mohammad Fazle Rabbi says: 6/12/2013

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

Contact Form

Name

Email *

Message *