Custom Style Labels Cloud Widget for Blogger Blog

In this post, I am going to share a beautiful CSS label style for a blogger blog. These 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 a simple design that does not look beautiful. But we designed our labels widget like CSS buttons, which will look attractive more than the default blogger labels cloud widget style.

How to Add Custom Style Labels Cloud Widget in Blogger Blog?​

To do this just follow the simple steps below.

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

]]></b:skin>

• Then copy and paste 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​

Before applying these label tricks you must set your label style to Cloud. To do this simply follow these steps.

• 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 your blog. Hope it works for you – for me, it works just perfect. If you face any problem, then leave a comment below and if you get this post is helpful then kindly share this post on social network sites. Thanks for reading the post.