Add Awesome Hover Effect To Your Sidebar Links

Add smooth hover effect to your sidebar links such as Labels,Popular posts and Blog Archive.I have done this with css.You can see live demo at my blog I also added this effect to my blog.On mouse hover it slides to right side little much which attracts your visitors.For adding this code you just have to replace the code from your template.Now let's see how to add cool hover effect to your sidebar links.

♫ For Demo Hover On Labels ♫

How To Add Hover Effect To Sidebar Links ?

• Go to Blogger Dashboard  ►  Design ►  Edit HTML.
• Download Full Template.
• Now Search For this type of code (Note - This code will little diffrent as your blog dessign)

.sidebar li {
background: none;
border-bottom: 1px solid #EEE;
padding: 8px;
padding-left: 22px;
}

Now replace above type of code with below,

#sidebar li{
background:#FFFFFF; 
display: block;
font-size: 14px;
line-height: 24px;
padding: 4px 5px 4px 10px;
-moz-transition: all 0.3s ease-out;  
-o-transition: all 0.3s ease-out;  
-webkit-transition: all 0.3s ease-out;  
-ms-transition: all 0.3s ease-out;  
transition: all 0.3s ease-out;  
}
#sidebar li:hover{
background:#E6E6E6;
padding: 4px 5px 4px 36px;
}

*You can change all the CSS values as you wish

Now first preview your template then save it.(Note - When you preview your template then quickly check it because hover effect in preview is temporary).

If you are not getting the correct then please comment with your blog address.