Edit default blogger label widget and create 3D label widget

This is a screenshot of this widget during hovering. Blog  Design tag is animating now. First you need to add the default Label widget by going Layout > Add Gadget > Labels. If you have already the Labels widget, skip this step. Now go to Template > Edit HTML > Proceed. Tick the Expand Widget Templates option. Now find the following code, then click on the arrow button and expand it.

</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="&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;">

Add replace the above code with below code.

<div expr:class="&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;" 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.