</b:skin>
Add following CSS code just above the above code.
/*Categories hovering widget by Blogger How*/
#categories ul{padding-left:0px;width:auto;}
#categories ul li {background: #EFEFEF;
list-style-type: none;
margin:0 0 5px 0px;
padding:5px 5px 5px 20px !important;
border: 1px solid #E5E5E5;
-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:hover {
background: #EFEFEF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQGzFdupoM9L8HCWgCOfvHGaaVJLcbypJmbfVkPsG2pFC4gakbMFhZZ9cgk_6piF9_OeN9QMArhRVDaC8MG-F-vIHnRL4NCXjNgR5fY1xZeNQcvlojKyYqIKiURWQ6I179aWOvYU6uYYU/s1600/widget-list.png) no-repeat scroll 5px 10px;
border:1px solid #A5A5A5;
box-shadow: 7px 7px 5px #CECECE;
}
#categories ul li a {
text-decoration: none;
color: #7A7A7C; /*Set text Link Color*/
font-size: 1.1em;
padding: 0 5px;
}
#categories ul li a:hover {
color: #38383D;
font-size: 1.2em;
text-decoration:none;color:#000;
}
Click on the Jump to Widget drop down menu and select the label widget, Click on the arrow to expand the code. Now press Ctrl+F (or take Find). Find the following code.
<div expr:class=""widget-content " + data:display + "-label-widget-content"">
Add replace the above code with below code.
<div expr:class=""widget-content " + data:display + "-label-widget-content"" id="categories">
You are done. Now you can customize the color of the widget according to your blog template colors. Go to this link, find hex code of the color you want. Then find and replace following color codes in the above CSS code.
#EFEFEF is the background color.
#E5E5E5 is the border color.
#CECECE is the shadow color.
#A5A5A5 is border color during hovering of mouse.
#7A7A7C is the text link color.
#38383D is the text link color during hovering of mouse.
If you want to change the size of the font during hovering, change 1.2em to other values. It gives nice effects.
.png)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
