Add Beautiful Label Cloud Widget In Blogger

Add a beautiful and stylish effect in Blogger labels. By this you can give a beautiful CSS effect to your Blogger  Labels. By default Blogger cloud widget  is not well beautiful but we can make it

more beautiful and stylish CSS effect to your labels. It can make a good  impression to you blog readers and this will appear on the right side of you site template. For this cause today i am making a post on Labels Widget so lets start our work.

     

• Also check Custom Label Widget In Blogger

How To Add Label Cloud Widget In Blogger?

To add this widget follow these simple steps:-

• Go to Blogger > Template > Edit HTML
• Now search for ]]></b:skin> using ctrl+f
• Paste the following code above ]]></b:skin>

.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:24px;
line-height:24px;
position:relative;
font-size:12px;
margin-bottom: 9px;
margin-left:20px;
padding:0 10px 0 12px;
background:#0089e0;
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;
}
.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 your template and you are done