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.

Post a Comment

  1. http://safetricks.blogspot.in/

    ReplyDelete
    Replies
    1. Find below code in your template,

      #rsidebar-wrapper{width:290px;float:right;margin:0px;padding:0px 0px 0px 0px;word-wrap:break-word;overflow:hidden;text-shadow:0 1px 0 #fff;}

      replace the above code with below one,

      #rsidebar-wrapper 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;
      }
      #rsidebar-wrapper li:hover{
      background:#E6E6E6;
      padding: 4px 5px 4px 36px;
      }

      save your template and you are done

      Delete
    2. first take a preview of your template

      Delete
  2. http://bfbvd.blogspot.in/ yaha es blog par test kiya maine.....

    ReplyDelete
  3. to maine jo upar code diya hai usme ye add kardo

    width:290px;

    sirf itna hi add karo aur dusri line mein karo

    ReplyDelete
  4. http://bfbvd.blogspot.com/
    dekho bro kya probm hai....

    ReplyDelete
  5. Can't find :(

    http://diary-famiglia.blogspot.com/

    ReplyDelete
  6. thanxs
    http://robosoft2.blogspot.com/

    ReplyDelete

If you want to be informed about any replies then check "Notify me" option (present at lower right corner of comment box and it will display if you are logged in to your google account).PLEASE DO NOT SPAM

 
Top