Stylish Custom Labels Cloud widget for Blogger

Today I am going to shar a beautiful CSS labels style for blogger. This tricks you can easily apply for your blogger blog labels widget by just adding some simple CSS codes into your blog. Blogger Tag Clouds are used to show all the categories or labels present in a blog. By default blogger comes with simple design they do not look beautiful. But we designed our labels widget like CSS buttons, which will be looking attractive more than the default blogger labels cloud widget style. you can see preview in our screenshot image to know how is this is. I hope you will like it.

Note:- Before applying this label tricks you must set your label style to Cloud.

How to add make custom labels cloud widget?

To do this just Follow the simple steps bellow.

• Sign In to Blogger Dashboard>> Template >> Edit HTML
• Search for bellow tag in your blogger template

]]></b:skin>

• Then copy and past the CSS codes above ]]></b:skin> tag

/*----- Custom Labels Cloud-----*/
.label-size
{
position:relative;
margin:0;
padding:0;
}
.label-size a
{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom:9px;
margin-left:20px;
background:#2aa4cf;
color:#fff;
text-decoration:none;
-moz-border-radius-bottomright:4px;
-webkit-border-bottom-right-radius:4px;
border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
border-top-right-radius:4px;
padding:0 10px 0 12px;
}
.label-size a:before
{
content:"";
float:left;
position:absolute;
top:0;
left:-12px;
width:0;
height:0;
border-color:transparent #0089e0 transparent transparent;
border-style:solid;
border-width:12px 12px 12px 0;
}
.label-size a:after
{
content:"";
position:absolute;
top:10px;
left:0;
float:left;
width:4px;
height:4px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
-webkit-box-shadow:-1px -1px 2px #004977;
box-shadow:-1px -1px 2px #004977;
}
.label-size a:hover
{
background:#555;
}
.label-size a:hover:before
{
border-color:transparent #555 transparent transparent;
}

• Save Template.

how to set your blogger label widget style to Cloud

Go to layout >> add new gadgets where you want to show your tag or labels
Add Labels >> change the name to tag
Show>> All Labels
Sorting>> alphabaticaly
Display>> cloud

Finally save your template and you are done.