Add Beautiful Label Cloud Widget In Blogger

Add a beautiful and stylish effect in 
  Blogger labels. By this you can give a 
  beautiful CSS effects 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 
  templates. For this cause today i am making a post on Labels Widget so lets start our work.

1. How To Add Label Cloud Widget In Bloggers?

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

Need Help ? Dears friends and respecteds readers if you need any kind of help about this post or any other post of this site then feel free to ask your questions. On Comment Below...