3 - customizing blogger labels

Blogger labels are used for specifying categories of the posts. By using labels in your blogger blog  you can differentiate among different types of posts from each other by creating their groups. Default blogger labels are not styled well. Which results in bad overall design of a blog but don`t worry these blogger labels can be easily customized using a small CSS code In this post we will provide you our 5 best designs for customizing your blogger labels.

1. Log in to blogger account and Click drop down.

2. Now select "Template" Like Below.

3. Now you can see Live on blog, Click EDIT HTML Button"

4. Now click Proceed button.
   
5. Find this tag by using Ctrl+F    ]]></b:skin>

6. Paste below code Before ]]></b:skin> tag

Design 1: Clean labels

CSS CODE

.label-size{
 margin:0;
 padding:0;
 position:relative;
 } 
 .label-size a{
text-decoration:none;
 float:left;
 height:18px;
 line-height:18px;
 position:relative;
 margin-bottom: 9px;
 margin-left:10px;
 padding:10px;
  background-color: #eeeeee;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #eeeeee), color-stop(100%, #cccccc));
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
  background-image: linear-gradient(top, #eeeeee, #cccccc);
  border: 1px solid #ccc;
  border-bottom: 1px solid #bbb;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  color: #333;
  font: bold 12px verdana;
    text-align: center;
  text-shadow: 0 1px 0 #eee;
  }
  .label-size a:hover {
    background-color: #dddddd;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dddddd), color-stop(100%, #bbbbbb));
    background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
    background-image: linear-gradient(top, #dddddd, #bbbbbb);
    border: 1px solid #bbb;
    border-bottom: 1px solid #999;
        text-shadow: 0 1px 0 #ddd; }
  button.clean-gray:active {
    border: 1px solid #aaa;
    border-bottom: 1px solid #888;
    -webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    -moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
    box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee; }

Design 2: Animated border style labels

 

CSS CODE

.label-size{
 margin:0;
 padding:0;
 position:relative;

 } 
 .label-size a{
 float:left;
 height:18px;
 line-height:18px;
 position:relative;
 font:14px verdana;
 margin-bottom: 9px;
 margin-left:10px;
 padding:10px;
 color: #fff;
 background: #48C9FF;
 background: -webkit-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
 background: -moz-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
 background: -ms-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
 background: -o-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
 background: linear-gradient(to bottom, #48C9FF 0%, #2EA8E5 100%);
 text-shadow: #29a3cc 0 1px 3px;
 text-decoration:none;    
 border-top-left-radius: 10px 50px;
 border-bottom-left-radius: 10px 50px;
 border-top-right-radius: 10px 50px;
 border-bottom-right-radius: 10px 50px;
 -moz-border-radius-topleft: 10px 50px;
 -moz-border-radius-topright: 10px 50px;
 -moz-border-radius-bottomright: 10px 50px;
 -moz-border-radius-bottomleft: 10px 50px;
 -webkit-transition: all 0.5s ease;
 -moz-transition: all 0.5s ease;
 -ms-transition: all 0.5s ease;
 -o-transition: all 0.5s ease;
 transition: all 0.5s ease;
 }

.label-size a:hover 
{
 -moz-border-radius-topleft: 50px 50px;
 -moz-border-radius-topright: 50px 50px;
 -moz-border-radius-bottomright: 50px 50px;
 -moz-border-radius-bottomleft: 50px 50px;
 border-top-left-radius: 50px 50px;
 border-bottom-left-radius: 50px 50px;
 border-top-right-radius: 50px 50px;
 border-bottom-right-radius: 50px 50px;
}

Design 3: Button style label

 

CSS CODE

.label-size{
 margin:0;
 padding:0;
 position:relative;

 } 
 .label-size a{
              float:left;
 height:18px;
 line-height:18px;
 position:relative;
 font:13px verdana;
 margin-bottom: 9px;
 margin-left:10px;
 padding:10px;
 text-decoration:none;
 background-color: #ff4c47;
 border-radius: 3px;
 box-shadow: 0 2px 0 #db443d;
 -moz-box-shadow: 0 2px 0 #db443d;
 -webkit-box-shadow: 0 2px 0 #db443d;
 color: #fff;
 
 text-align: center;
}

.label-size a:hover {
 background-color: #db443d;
}

 7.Save your template. you done it.

Go back to your home page and refresh it and see the difference..Hope you liked this article. Thanks for reading.