Stylish Custom Labels Cloud widget for Blogger

Stylish Custom Labels Cloud widget for Blogger

Today I am going to shars a beautiful CSS labels style for blogger. This trickes 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. NEw 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 Hmm default blogger labels cloud widget style. you can see preview in our screenshot image to know how is this is. I hope your wills 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 sets your blogger label widget style to Cloud

Simply Follow our screenshot image and instruction bellow to set label widget style to cloud mode.

• You have to go to Dashboard > Layout > Edit the "Labels" widget option and set "cloud" mode.

• Finally save your template and you are done.

Now view you blog. Hope it works for you - for me it works just perfect. If you face any problem, then lave a comment bellow and if you get this post is helpful then kindly share this post on social network sites. Thanks for reading post.