How to Customize Cloud Labels Widget for Blogger

I hope you are familiar with the blogger labels widget. You can easily categorize your posts by using Labels. Labels are useful if you are writing on many topics, so readers can easily view the posts of their choice by clicking on the Label.

By default on blogger blog you may see the Label Widget look likes something this.

Label Widget before Customization

First of all I am assuming that you haven't added a Labels Widget. So lets see how to add the Labels Widget and then we will customize it.

Step-wise Tutorial on How to Customize Cloud Labels Widget for Blogger

Step 1 : Go to Blogger Dashboard

Step 2 : Click on Layout

Step 3 : Click on Add a Gadget

Step 4 : Now select Labels from the list

Step 4

Step 5 : Select Cloud

Step 5

Step 6 : Click on Save

Step 7 : Now go to Template

Step 9 : Click on Customize

Step 10 : Click on Advanced

Step 11 : Now scroll down and click on Add CSS

Step 12 : Now paste the below mentioned code into the box

.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #359BED;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:12px; 
color:#000000;
}
.label-size:hover {
border:1px solid #359BED;
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;
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
-webkit-transform: rotate(1deg);
-ms-transform: rotate(1deg);
transform: rotate(1deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 0;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover {
text-decoration: none;
}

Step 13 : Click on Apply to Blog

Label Widget after Customization

I hope you have liked this post, if you have then please share with friends.

Happy Blogging!