How to Change Default Label Style in Blogger

Tag Clouds are used to display all the categories or labels present in a blog. The inherent design of this widget in blogger is very minimal and has a lot of space for creativity. In this post we will be showing Label Widget designs which you can easily integrate within your blog. We will design our labels like 3D buttons which will be looking attractive more than the default style. CSS3 Gradients and Box-Shadow properties are also use to give more stylish and puppy look to blogger labels. By default blogger comes with strange design they don't look beautiful. You can customize your Label widget by adding some CSS3 codes. I hope you will like this.

The default blogger label is not stylish it looks very simple. But you can customize your blogger label so attractive. This article will show how to change the default style in blogger.

1- Go to your Blogger Dashboard

2- Go to Template  >>  Edit HTML

3- In the HTML code box, press Ctrl+F then type

]]></b:skin>

4- Now copy the below code and paste these code just above the ]]></b:skin>

.list-label-widget-content ul

{

list-style-type:none;

padding-left:0px !important;

display:inline-block !important;

}

.list-label-widget-content li

{

display:inline-block;

}

.list-label-widget-content li a {

color: #777;

font: 9px verdana;

text-transform: uppercase;

transition: border-color .218s;

background:#f4f4f4;background:

-webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

display: inline-block;

text-shadow: 0 1px 0#fff;-webkit-transition: border-color .218s;

-moz-transition: border .218s;

-o-transition: border-color .218s;

transition: border-color .218s;

background:#f3f3f3;

background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));

border: solid 1px#ccc;

border-radius: 2px;

-webkit-border-radius: 2px;

-moz-border-radius: 2px;

margin: 0 4px 4px 0;

padding: 3px 5px;

text-decoration: none;

}

.list-label-widget-content li a:hover

{

color: #333;

border-color: #999;

-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);

box-shadow: 0 1px 2pxrgba(0,0,0,0.15);

}

Note: 

• If you wish to change font size, change the size in RED color.
• If you wish to change the font style, change the font name in BLUE color.

5- Save template

That's it!
Don't forget to share this awesome tip to your friends by clicking sharing buttons below.