How to Customize Labels Cloud in Blogger

Customized Labels Cloud For Blogger: Here's how to Customize Labels Cloud in Blogger using CSS3.

Labels widget/gadget In blogger makes it easier to categorize your blog post thereby giving your visitors a better way to go through related post on your blog.

Using a labels cloud widget/gadget on a website can help in reducing your site's bounce rate since readers will not leave your blog immediately when they arrive.

They can be attracted to subcategories on

The default blogger labels widget does not really have that clean and elegant look.

Looking for something cool?

Then try this Customized Labels Cloud Widget for Blogger. To edit yours, follow the guidelines below

How to Customize Labels Cloud in Blogger


To add a Customize Labels Cloud in Blogger  in your blog, follow the steps below:

  • From your Blogger dashboard
  • Goto 'Layout'.
  • Click on 'add a gadget'.
  • Select 'Labels' from the pop-up options.
  • Tick the option 'cloud' display.
  • Save the gadget.



  • Next, go to your blogger template, backup the template.
  • Click on 'Edit html'.
  • Click inside your template, using ctrl+f keys search for ]]></b:skin> 
  • Copy any of the codes below for your preferred style and paste 'above'  ]]></b:skin> 


Style 1



/*--- techlass.com Custom Label Cloud With CSS3 --- */
.Label a{
padding-left:20px;
background:#000;
padding:0 20px;
color:#fff!important;
border-radius:100px;
-moz-border-radius:100px;
height:32px;
line-height:32px;
text-transform:uppercase;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;
margin-left:5px;
margin-top:5px;
font-size:14px; }

.Label a:hover{
color:#000 !important;
background:#ff0; }


Style 2


.Label a {
     -moz-border-bottom-colors: none;
     -moz-border-left-colors: none;
     -moz-border-right-colors: none;
     -moz-border-top-colors: none;
     background-color: #7FBF4D;
     background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);
     border-bottom-right-radius: 30px;
     border-color: #63A62F #63A62F #5B992B;
     border-image: none;
     border-style: solid;
     border-top-left-radius: 30px;
     border-width: 1px;
     box-shadow: 0px 1px 0px 0px #96CA6D inset;
     color: #FFFFFF;
     float: left;
     font: 14px verdana;
     height: 18px;
     margin-bottom: 9px;
     margin-left: 10px;
     padding: 10px;
     position: relative;
     text-decoration: none;
     transition: all 0.5s ease-in-out 0s;
}

.Label a:hover {
     background: none repeat scroll 0% 0% orange;
     border-radius: 0px 30px 0px 30px;
     border: 1px solid orange;
     text-shadow: 5px 5px 5px #DCDCDC;
}

.Label {
     margin: 0px;
     padding: 0px;
     position: relative;
}
.Label li:hover {
    transform: rotate(5deg);
}
.Label li {
    float: left;
    font-size: 116%;
    list-style: none outside none;
    transition: all 0.3s ease 0s;
}

  • Save your template.




Do you like this post? Please link back to this article by copying one of the codes below.

URL Of Post:


HTML Link Code:

BB (forum) link code:

Comments

Post a Comment

Please share your views on this topic with Grace Joseph by leaving a comment.