Edit Default Blogger Label Widget As Well As Utilization 3D Label Widget

How close editing default Label widget? The default Label or Tag widget shows categories inward your blog. This tin live on edited to exercise a beautiful customized widget. Colors tin live on 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 yous ask to add together the default Label widget past times going Layout > Add Gadget > Labels. If yous induce got already the Labels widget, skip this step. Now become to Template > Edit HTML > Proceed. Tick the Expand Widget Templates option. Now honour the next code, thence click on the arrow push as well as expand it.

</b:skin>

Add next CSS code simply inward a higher house the inward a higher house code.

/*Categories hovering widget past times 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 company #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/AVvXsEj5lftgKqRFB-zHpoCGicmW44k2GbE-uXPVd28p_zeh4pKGrXTDkAZkRMYBabnYygGMfc9K9eBd0HueWfz408_IAw1MtYlya90VrcLdzBYuxUim2ySDJWCJM3l03fqJZ5LKOppjiXqKTh8/s1600/widget-list.png) no-repeat scroll 5px 10px; border:1px company #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 driblet downward carte du jour as well as choose the label widget, Click on the arrow to expand the code. Now press Ctrl+F (or induce got Find). Find the next code.

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

Add supplant the inward a higher house code alongside below code.

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

You are done. Now yous tin customize the color of the widget according to your weblog template colors. Go to this link, find hex code of the color yous want. Then honour as well as supplant next color codes inward the inward a higher house CSS code.

#EFEFEF is the background color.

#E5E5E5 is the edge color.

#CECECE is the shadow color.

#A5A5A5 is edge color during hovering of mouse. 

#7A7A7C is the text link color.

#38383D is the text link color during hovering of mouse. 

If yous desire to alter the size of the font during hovering, alter 1.2em to other values. It gives overnice effects.

Share this post