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.
