Lets Talk About: Code's To Customized Stylish Labels For Blogger

Tags

One of the easily way to locate things you are looking for in any site is through label. The importance of label to every site can't be over emphasis, in fact nowadays to get approve for Adsense they demand that your site must be easily navigate and that can only be possible through the power of
label. Looking for a way to set the appearance of your blog and also maintain such look is very very important. And one of the way to achieve this is by continuously implementing new templates, adding cool widgets, and also customizing your blogs with codes to have a more better view. Nowadays there are several templates on the internet, some are free while some are premium,

but the fact remain that some of this templates which are already popular and have many features needs registration so most of us avoid them, am try our best to customize our own template which i believe is good idea to enhance our knowledge on the area of CODING/HTML.

Now for this dream to be actualize, we need to add either widgets, menus, images, backgrounds, fonts. etc And also we have to customize the widgets like popular post widget and labels/categories. So my job today is to show you codes you can use to achieve this. Am going to be sharing with you different style labels choose the one you like most and believe will fit your blog template and apply it to your blog. And for those new to blogging you will also how to add label widget in your blog.

So without wasting much time let start by how to add labels/categories widget in blogger: You don't need any form of CSS code to achieve this (add label) widget in blogger as blogger has already provided this widget in widgets list. To add label is very simple simple follow the steps below:

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.

Now lets head over to customize labels in blogger: You have option to customize these  label by CSS, and to achieve this you simply need to copy the style which you like most from below and follow the steps. Remember also to choose display as cloud if not the customize will not work properly. The image below is illustration of how to choose cloud display:

Now after you have choosing display as cloud and save it's time to add CSS code to achieve our desire, so follow the steps below to add the CSS code for label style of your choice. But in-case you are new to code remember to back up your Template before proceeding. Okay here we go:

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(we call it 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(We call it 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(We call it 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(We call it 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(We call it 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(We call it 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.
So there you have it code's to use to customize your label to a professional standard. Do hope you enjoy this post kindly use the comment box if you have questions, or comment. Remember the out look of your blog tells a lot about you good luck.

Lets Talk About It! Join Me Please
EmoticonEmoticon