Customized Stylish Labels For Blogger

Improving the appearance of blog and maintaining blog look is always important. Bloggers are implementing new templates, adding cool widgets and customizing their blogs to have a more good blog than others. There are several templates on the internet also which are already popular and have many features but many of them needs registration. These templates have cool look, good navigation and responsive design but due to registration many bloggers avoid to buy these templates and try to customize their own template. For this they either add widgets, menus, images, backgrounds etc or customize the widgets like popular post widget and labels/categories so here I will tell you haw to customize your blog labels, I am sharing different style labels choose the one which you like and apply it to your blog.
In this post you will not only learn how to customize label but also learn how to add label widget in blogger, so this posts is also for those who are new to blogging. 

How to add Labels/categories widget in blogger: 

You don't need any html or css code to add labels widget in blogger as blogger has already provided this widget in widgets list. Its very simple to add a label widget in blogger, to add a label widget in blogger following steps are to be followed:

Step 1: First of all go to blogger log-in to your blogger account, select your blog and click on Layout.

Step 2: In the Layout page click on add a gadget, which open a small window having list of gadgets.

Step 3: Scroll it down to Labels, click on it and see the option select or deselect at your own choice and move to next step.

Step 4: After choosing desired option click on save and you are done. 

Customizing labels in blogger:

You can customize these label by css, for this you need to copy a code from below styles which you like and follow the below steps. Before customizing labels you have to choose display as cloud otherwise labels can't be customized properly. See the below image to know how to choose display of labels as cloud:

After choosing display as cloud its time to add CSS code, so follow below steps to add CSS code for labels:

Step 1: Go to blogger Dashboard.

Step 2: Select template in menu on left hand side and click on Edit Html.

Step 3: Click anywhere in the Html code and search for ]]></b:skin> by using Ctrl+F on your keyboard.

Step 4: Copy anyone of the below code and paste it just above ]]></b:skin>.  

Style 1(colorful labels):

.sidebar .label-size {font-size:14px;color:#fff!important;}
.sidebar .label-size a {text-decoration:none;color:#fff!important;font-weight:bold;padding:8px 10px;margin:0 6px 6px 0;float:left;display:block;-moz-transition: all 0.4s ;-o-transition: all 0.4s;-webkit-transition: all 0.4s ;-ms-transition: all 0.4s ;transition: all 0.4s ;}
.sidebar .label-size-1 a {background:#1abc9c;border-bottom:3px solid #127F69;}
.sidebar .label-size-1 a:hover {background:#16a085;}
.sidebar .label-size-2 a {background:#3498db;border-bottom:3px solid #226693;}
.sidebar .label-size-2 a:hover {background:#2980b9;}
.sidebar .label-size-3 a {background:#2ecc71;border-bottom:3px solid #1F8C4C;}
.sidebar .label-size-3 a:hover {background:#27ae60}
.sidebar .label-size-4 a {background:#9b59b6;border-bottom:3px solid #74398E;}
.sidebar .label-size-4 a:hover {background:#8e44ad}
.sidebar .label-size-5 a {background:#e74c3c;border-bottom:3px solid #922C20;}
.sidebar .label-size-5 a:hover {background:#c0392b}

Style 2(Reddish color labels):

.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;
}

Style 3(blue color labels):

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

 } 
 .label-size a{
 float:left;
 height:18px;
 line-height:18px;
 position:relative;
 font:14px Trebuchet;
 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;
}

Style 4(Blue and grey responsive labels):

.label-size{ margin:0; padding:0; position:relative; } .label-size a{ float:left; height:24px; line-height:24px; position:relative; font-size:12px; margin-bottom: 9px; margin-left:20px; padding:0 10px 0 12px; background:#0089e0; color:#fff; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px; }.label-size a:before{ content:""; float:left; position:absolute; top:0;left:-12px;width:0;height:0; border-color:transparent #0089e0 transparent transparent; border-style:solid; border-width:12px 12px 12px 0; }.label-size a:after{ content:""; position:absolute; top:10px;left:0; float:left; width:4px; height:4px; -moz-border-radius:2px;-webkit-border-radius:2px; border-radius:2px; background:#fff;-moz-box-shadow:-1px -1px 2px #004977; -webkit-box-shadow:-1px -1px 2px #004977; box-shadow:-1px -1px 2px #004977; } .label-size a:hover{background:#555;}.label-size a:hover:before{border-color:transparent #555 transparent transparent;}

Style 5(Black and blue responsive labels):

.label-size{
 margin:0;
 padding:0;
 position:relative;
 }
 .label-size a{
 float:left;
 height:24px;
 line-height:24px;
 position:relative;
 font-size:12px;
 margin-bottom: 9px;
 margin-left:20px;
 padding:0 10px 0 12px;
 background:#000;
 color:#fff;
 text-decoration:none;
 -moz-border-radius-bottomright:4px;
 -webkit-border-bottom-right-radius:4px;
 border-bottom-right-radius:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-right-radius:4px;
 border-top-right-radius:4px;
 }
.label-size a:before{
 content:"";
 float:left;
 position:absolute;
 top:0;
left:-12px;
width:0;
height:0;
 border-color:transparent #000 transparent transparent;
 border-style:solid;
 border-width:12px 12px 12px 0;
 }
.label-size a:after{
 content:"";
 position:absolute;
 top:10px;left:0;
 float:left;
 width:4px;
 height:4px;
 -moz-border-radius:2px;
-webkit-border-radius:2px; border-radius:2px;
 background:#fff;
-moz-box-shadow:-1px -1px 2px #004977;
 -webkit-box-shadow:-1px -1px 2px #004977;
 box-shadow:-1px -1px 2px #004977;
 }
.label-size a:hover{background:#6099D0;}
.label-size a:hover:before{border-color:transparent #6099D0 transparent transparent;}

Style 6(Go Green):

.sidebar .label-size {font-size:14px;color:#fff!important;}
.sidebar .label-size a {text-decoration:none;color:#fff!important;font-weight:bold;padding:8px 10px;margin:0 6px 6px 0;float:left;display:block;-moz-transition: all 0.4s ;-o-transition: all 0.4s;-webkit-transition: all 0.4s ;-ms-transition: all 0.4s ;transition: all 0.4s ;}
.sidebar .label-size-1 a {background:#4A4A4A;border-bottom:3px solid #20262B;}
.sidebar .label-size-1 a:hover {background:#27ae60;}
.sidebar .label-size-2 a {background:#4A4A4A;border-bottom:3px solid #20262B;}
.sidebar .label-size-2 a:hover {background:#27ae60;}
.sidebar .label-size-3 a {background:#4A4A4A;border-bottom:3px solid #20262B;}
.sidebar .label-size-3 a:hover {background:#27ae60;}
.sidebar .label-size-4 a {background:#4A4A4A;border-bottom:3px solid #20262B;}
.sidebar .label-size-4 a:hover {background:#27ae60;}
.sidebar .label-size-5 a {background:#4A4A4A;border-bottom:3px solid #20262B;}

.sidebar .label-size-5 a:hover {background:#27ae60}

Step 5: Click on save template and you are done.

Final words:

I hope you like this post, if yes then share your experience with me by leaving a comment below. If this post worked take a few seconds to share it with others. Follow and subscribe to 101Helper to get latest news about blogger gadgets in your inbox.

Tags: How to customize labels in blogger, Customized stylish labels of different styles for blogger, stylish labels for blogger, customization tips for blogger, 101Helper gadgets for blogger.

Share this

Share on FacebookPlus on Google+