Customize label clouds in blogger with advance 5 ways

Custom label clouds is a best way to show your all posts that tagged with specific group. Before going into depth let me give explain it. You can say that labels are those categorizes or fields where post attached. While writing a blogger post we tag it with relative grouping. In blogger there is a simple way to showing it. These joint grouping is a way to engage your reader also it decrease the bounce rate alternatively increase spending time on website. A visitor can find easily more and more stuff with the help of labels on blogger. We can place these labels in sidebar as well as in footer section. For the sake of getting additional attention from user we can customize these blogger labels from simple to attractive form. This implementation not only snatches the reader’s concentration while on the other hand it provides a new glance to your site. So let’s dive.

How to add label clouds in blogger:

If you have little experience to inserting of labels then let me tell you. It is necessary that you have posts that mark with special class. For example if you have a post about what is SEO? Then your expected tag will be search engine optimization or simply SEO. In order to showing all these type of labels at your home page of blog. Follow these instructions. Go to Layout > Add a Gadget > Select Labels >  then choose these settings as you seen in below image screenshot

custom label settings

Also read:
       2 new way to show popular posts in blogger
Now we move forward for next step.

Customizing clouds labels in your own way:

This is the time to customizing these labels with CSS. TcM is the site which gives you vast five ways to customize according to designing of your blog. Just select your version of labels with screenshots of images in given coding and you are done. For simplicity I explain the whole procedure in 3 steps.

  • Go to blogger dashboard > Template > Edit HTML.
  • Find this piece of code  ]]></b:skin>
  • Select your desired coding from all of five codes that are given below and paste it to just above it. Save template and reload the page. Bingo you have a new charming look on your blog. Enjoy.  

/////////////##########111111111#######/////////////
.label-size{
background: #f06;
background: linear-gradient(45deg, #f06, green);
text-transform: uppercase;
color: #fff;
font-size: 10px;
font-family: arial,sans-serif;
text-decoration: none;
opacity: .9;
padding: 4px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-backface-visibility: hidden;
display:block;
margin: 0 5px 5px 0;
float: left;
opacity:.9;}
.label-size:hover{background:black;
                  color:#0EFF00;
                  text-decoration:underline;}
/////////////########22222##########///////////////
.label-size{
background: #f06;
background: linear-gradient(45deg, #F57319, black);
text-transform: uppercase;
color: #fff;
font-size: 10px;
font-family: georgia,sans-serif;
text-decoration: none;
opacity: .9;
padding: 4px 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-backface-visibility: hidden;
display:block;
margin: 0 5px 5px 0;
float: left;
opacity:.9;}
.label-size:hover{background:black;
                  color:#0EFF00;
                  text-decoration:underline;}
///////////#########3333333#######/////////////////////
.label-size{
background: #000;
background: linear-gradient(75deg, #000, #646);
text-transform: uppercase;
color: #66FF33;
font-size: 10px;
font-family: Monotype Corsiva,;
font-weight:bold;
text-decoration: none;
opacity: .9;
padding: 4px 10px;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-backface-visibility: hidden;
display:block;
margin: 0 5px 5px 0;
float: left;
opacity:.9;}
.label-size:hover{background:black;
                  color:#0EFF00;
                  text-decoration:underline;}

////////////###########4444444444##########/////////////
        .label-size{
margin:0 2px 6px 0;
background: #FFF;
padding: 3px;
text-transform: uppercase;
border: solid 1px #000;
border-radius: 4px;
float:left;
text-decoration:none;
font-size:10px;
color:#000;
}      
.label-size:hover {
border:1px solid #66FF33;
color:#00F;
text-decoration: none;
 }
///////////##########55555555555########////////////
        .label-size{
margin:0 2px 6px 0;
background: #FFF;
padding: 3px;
text-transform: uppercase;
border: solid 1px #000;
border-radius: 4px;
float:left;
text-decoration:none;
font-size:10px;
color:#000;
}      
.label-size:hover {
border:1px solid #66FF33;
color:#00F;
text-decoration: none;
width:100px;
height:20px;
background:grey;
transition:width 2s;
-webkit-transition:width 2s;
-moz-transition:width 2s;
-}

1st Cloud label

2nd way of showing  Cloud label

third style of label cloud

fourth style of show label

final style of showing custom cloud labels.

Customization:
See your style from all of above shown images an select coding.

Need help:

I know that while implementing there should be problems occurs especially who don’t tackle with coding before it. So if you face any type of difficulty or clouds labels shows improperly then ask us. It will increase our experience regarding product also way of help others. Finally show your love with sharing this tutorial and contribute to spreading knowledge for all if you can.


2 Comments

  1. Anonymous 14 May 2014
  2. Admin 7 August 2014

Leave a Reply