Edit default blogger label widget and create 3D Label Widget

How about editing default Label widget? The default Label or Tag widget shows categories in your blog. This can be edited to create a beautiful customized widget. Colors can be changed according to your template design. Editing is simple. Here is how... :)

 

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 LearnFre*/
#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/AVvXsEgSzMQ_fA20H9soL7d_qjdPnzZIrGpwg_ple6ORxDJHT-A-IZVXKnmck149y60lWtiU9EBYlzYb_cWv0aES2asSuBWXfwuKQfSxI8D_7xVPYzJWe9LZhngh1dNbJVZnb2OO2UtXaDVgESY/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.