Custom Style Labels Cloud Widget for Blogger Blog

In this post, I am going to share a beautiful CSS labels 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 be looking 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 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.

Similar Posts:

Previous Article
Best Ways for Students to Make Money Online in 2021
Next Article
Complete Guide To Help You Make Money Blogging

Thanks for choosing to comment on this article. A name and email address are required to post a comment. The email address is not publicly visible or shared. Please keep in mind that comments are moderated according to our comment policy.

Leave a Comment