Don't Miss

How to Customize Labels Cloud Widget in Blogger

By Zohaib Liaqat - 5 Comments
Do you want to make your Labels Cloud widget more prominent and attractive for your visitors? Labels Cloud is a widget provided by Blogger, that allow you to arrange your content or categorize your content under specific labels. This widget helps your visitors to easily browse your posts by choosing a specific label or category. This widget makes your blog user friendly. You can add this widget to your sidebar or footer.

The default design of the Labels Cloud widget is simple and not that much attention-grabbing. Therefore, to make it look clean and stylish, we've to customize it. As Blogger is a flexible platform and you can easily customize any element of your blog using CSS. So, we'll also customize the Labels Cloud using CSS3. Recently, one of our visitors asked us that How to Customize Labels Cloud Widget in Blogger. In this article, we'll show you that How to Customize Labels Cloud Widget in Blogger.

Don't Forget to Read:
101 Ways to Increase Your Website Traffic
5 Reasons You'll Quit Blogging Within 3 Months
18 Reasons Why Newbie Bloggers Quit Blogging

How to Customize Labels Cloud Widget in Blogger

First and foremost, Log in to your Blogger Account >> Select a Blog >> Template and click Edit HTML. Click inside the template code area and by using Ctrl+F search for the ]]></b:skin> tag. Now copy the below code and paste it just above/before it (]]></b:skin> Tag)

/*---------Labels Cloud--------*/
.label-size{
margin:0 2px 6px 0;
color:#666;
padding: 7px;
border: solid 1px #C6C6C6;
border-radius: 3px;
text-transform: uppercase;
text-decoration:none;
float:left;
text-decoration:none;
font-size:14px;
color:#666;
}

.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}

.label-size a  {
float:left;
text-transform: uppercase;
text-decoration: none;
color:#fff;
}
.label-size a:hover  {
text-decoration: none;
color:#2aa4cf;
}

Hit the Save Template button and you're done.
Congratulations: You've successfully customized your Labels Cloud widget.

From Editors Desk

We hope this article may have helped you in customizing Labels Cloud widget. Share this article with your friends, don't forget to subscribe us and Join our Bloggers Forum on Facebook @ https://www.facebook.com/groups/730927093629291

5 comments to ''How to Customize Labels Cloud Widget in Blogger"

ADD COMMENT
  1. This comment has been removed by a blog administrator.

    ReplyDelete
  2. This comment has been removed by a blog administrator.

    ReplyDelete
  3. Hi, Thank you for this info, it's almost exactly what I've been looking for. I used the code above and like the look of it, but have 1 question: As of right now, the above code aligns all the labels to the left. How do I change it to center it? Thank you very much!

    ReplyDelete
  4. Hiya, I’m really glad I have found this information. Nowadays bloggers publish only about gossip and net stuff and this is actually frustrating. A good site with interesting content, this is what I need. Thank you for making this website, and I will be visiting again. Do you do newsletters? I Can’t find it. https://royalcbd.com/product/cbd-roll-on-gel/

    ReplyDelete
  5. You have done a amazing job with you website labels

    ReplyDelete