Friday, 6 December 2013

Customize Labels Cloud in Blogger With Awesome Designs

So! You want to customize Labels Cloud in Blogger blog. In this post I will provide you some awesome and very good CSS style for Labels in Blogger. I will provide you step by step process in adding this new CSS style for Blogger Labels cloud

Today! I am to share a new post on customizing labels cloud in Blogger. Before it was little difficult to add labels clouds in Blogger but after Blogger started doing improvements it has become much easier to add labels tag to Blogger. But default Labels and labels clouds don't looks so good. So, this post is for those who likes designing and who wanted to make their Blog look more beautiful. In this post I will provide you two Labels cloud design which can be inserted in your Blogger blog very easily. To do this you have to follow some very simple steps.

Customize Labels Cloud in Blogger With Awesome Designs

Labels are the very important of a Blog. It allows administrator to easily categories their Blog Posts. Also, it can help users to navigate the site more easily. But you have to also keep in mind that Labels contains lots of links and some SEO Experts thinks that placing lots of labels in the Blog may be regarded as Spam. It is because of the very much links that it contains. If you want to insert Labels cloud in Blogger than you can use Custom Robots.txt in your Blog. Blogger allows to edit Robots.txt file. With the help of Robots.txt you can tell robots and spiders that which parts of the site it is to crawl and if you will not allow spiders to crawl Labels link than it will not follow any contents of the Labels. I will explain you about adding Robots.txt a little later in this tutorial. But first we will know how to customize and add labels cloud in Blogger blogs. Let's start the post.
Before going further I should remind you to make a Backup of your Blogger Template. It is very necessary as it is going to help you if by chance your Blogger Template get destroyed or corrupted with lots of Customizations. To make Backup Go to Blogger Home > Dashboard > Template > Backup/Restore Template. Now you can Download your Blogger Template.

Now let us begin the Customization part.
  • First of all Sign in to your Blogger Account if you haven't signed in yet.
  • Now click on the Blog title in which you want to add or Customize Labels in your Blogger blog.
  • Now you have to go to Template from the Dashboard.
  • In the Template page click on Edit HTML located just below the live preview of your Blog.
  • Search for the code given below.
Tip: You can search for any code by, First press anywhere in the HTML and than Press CTRL+F to open search box. In the search box type the above given code (]]></b:skin>) and hit enter.
  • Now you have to add the code given below just above ]]></b:skin> tag.

.label-size{ margin:0 2px 6px 0; padding: 3px; text-transform: uppercase; border: solid 1px #C6C6C6; border-radius: 3px; float:left; text-decoration:none; font-size:12px; color:#C0C0C0;
-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:hover { border:1px solid #292832; 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(7deg);  -o-transform: rotate(7deg);  -webkit-transform: rotate(7deg);  -ms-transform: rotate(7deg);  transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
.label-size a  { text-transform: uppercase; float:left; text-decoration: none; }
.label-size a:hover  { text-decoration: none; color: #292832; }
  • After adding the above given code quickly preview your Template and after preview you can Save Template by clicking orange Save Template button.
If you will use the above code to customize Labels Cloud than it will look something like the image given below.

Customize Labels Cloud in Blogger With Awesome Designs
See Text 'Example'(on hover)
As I have said I will provide two awesome label design to customize your Blogger blog labels. Here is another labels cloud style for Blogger blog. I am providing the CSS code of the Labels. Installing instructions is same as previous customization. If you like this Labels cloud style for Blogger than add the CSS code given below just above "]]></b:skin>" tag.

.label-size {
margin:0 3px 5px 0;
padding: 6px;
text-transform: uppercase;
border: solid 1px #ccc;
border-radius: 3px;
-moz-box-shadow: 0 1px 2px #bbb inset;
-webkit-box-shadow: 0 1px 2px #bbb inset;
box-shadow: 0 1px 2px #bbb inset;
.label-size:hover {
border:1px solid #999;
text-decoration: none;-moz-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,.25);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.25);
box-shadow:0 1px 2px rgba(0,0,0,.25);
.label-size:active {
outline: 0;
border-color: #aaa;
-moz-box-shadow: 0 4px 4px #bbb inset;
-webkit-box-shadow: 0 4px 4px #bbb inset;
box-shadow: 0 4px 4px #bbb inset;
.label-size a {
text-transform: uppercase;
text-decoration: none;
.label-size a:hover {
text-decoration: none;

If you choose this CSS code than the Labels on your Blogger blog will look like the image shown below.

Customize Labels Cloud in Blogger With Awesome Designs
See Different Variations of Label 'Example' on hover and active
If the above code doesn't make any changes than it means that your default Labels style is interfering the new style. But you can add the new style by removing the default CSS code for the Labels cloud style. To remove the old CSS styles for Labels search for the word "Label" and than press enter. After that you will find codes which will look similar to the code given above. You can also take a look at the simple CSS code given below. It will look something like it.
#Label1 li {
background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;
border: 1px solid;
border-radius: 6px 6px 6px 6px;
float: left;
font-size: 116%;
#Label1 li:hover {
color: #808080;
#Label1 a {
color: #fff;
text-decoration: none;
You were searching for the text which is highlighted red. You have to remove whole CSS code which looks like above. Don't forget to remove the any of the brackets. You can see blue colored bracket in the above code. Now after removing appropriate CSS style your new CSS style will take into effect.
  1. It's little difficult to customize Labels style if the default CSS style makes some problems.
  2. Keep searching for the codes and edit it with the steps given above.
  3. After Editing Labels Cloud preview your Template by pressing Preview button.
  4. After getting desired design Don't forget to Save the Template.
That's All about Customizing and Editing Labels cloud of Blogger blogs. I hope this post helped you in the customization of Labels. If you faced any problem than feel free to ask me.

No comments:

Post a comment