Blogger How

Design a categories hovering gradient for blogger using CSS3 without JavaScript.

I already posted about editing default Blogger label widget and creating a 3d hovering effect. The same method is applied here also. This piece of code will give a nice gradient color change and the text will animate during hovering. It uses rounded corners using CSS.
I am not explaining this post in detail. If you want a detailed explanation, go to above mentioned post. Only the CSS part is different.
Lets go to the coding part. Go to Template and take Edit HTML. First find ]]</b:skin>.
Now add following CSS below to the above code.

/*categories hovering widget by WorldunderSky.com*/
#categories ul{padding-left:0px;width:auto;}
#categories ul li {background: #fff;
list-style-type: none;
margin:0 0 5px 0px;
}
#categories ul li a {
-moz-transition: all 0.26s ease-out 0s;
background-image: -moz-linear-gradient(left center , transparent, transparent 50%, rgba(0, 0, 0, 0.2));
background-size: 200% 100%;
display: block;
overflow: hidden;
text-decoration: none;
color: #7A7A7C; /*Set text Link Color*/
font-size: 1.1em;
padding:5px 5px 5px 20px !important;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
}
#categories ul li a:hover {
background-size: 100% 100%;
font-size: 1.1em;
text-decoration:none;color:#000;padding:5px 5px 5px 40px !important;
}

Now find following code in Blogger template.

<div expr:class="&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;">

Replace the above line of code with below code.

<div expr:class="&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;" id="categories">

Now everything is Done. Save template. Refresh your blog.