How to customize blogger Labels Widget with Stylish Cool Effects

Generally default blogger labels widget is not stylish and decorated .Bloggers want that their labels widget will be beautiful for the visitors . Because , if your blog is so good looking, the visitors will attract. And they will return your site again. Thus your blog page view increase . It is the way to increase blogger visitors . Now i give you a tips how the blogger label make colorful.

At first you should back up your blogger template. Than

•  Sign In to Blogger Dashboard
•  Go to Template -> Edit HTML
•  Find ]]></b:skin> and copy the bellow code of label style ,you like - above ]]></b:skin>
•  Save Template

Read more : How to add multi-Colored Popular Posts Widget to Blogger.

Black Forest Theme Labels With Animated Scaling


                                       

  .Label li {        background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%,
#2B2B2B 100%) repeat scroll 0 0 transparent;  
    border: 1px solid;    
  border-radius: 6px 6px 6px 6px;  
   float: left;
       font-size: 116%;  
    list-style: none outside none;  
    margin: 2px;        padding: 4px;    
  transition: all 0.3s ease 0s;    }
.Label li:hover {    transform: rotate(351deg) scale(1.7);}
.Label a {     color: #fff;    text-decoration: none;}

Read more : How to customize a blogger template easily.

Yellow Customized Labels Widget

 .Label li:before {         background-image: -moz-linear-gradient(left top , #FEDA71, #FEBA47);         border-bottom: 1px solid #D99D38;         border-left: 1px solid #D99D38;         content: "";         height: 1.39em;         left: -0.69em;         position: absolute;         top: 0.2em;         transform: rotate(45deg);         width: 1.3em;         z-index: 1;     }     .Label li:after {         background: none repeat scroll 0 0 #FFFFFF;         border: 1px solid #D99D38;         border-radius: 4.167em 4.167em 4.167em 4.167em;         box-shadow: 0 1px 0 #FAEABA;         content: "";         height: 0.5em;         left: -0.083em;         position: absolute;         top: 0.667em;         width: 0.5em;         z-index: 9999;     }     .Label li {         background-image: -moz-linear-gradient(center top , #FEDA71, #FEBA47);         border-bottom: 1px solid #D99D38;         border-radius: 0 0.25em 0.25em 0;         border-right: 1px solid #D99D38;         border-top: 1px solid #D99D38;         box-shadow: 0 1px 0 #FAEABA inset, 0 1px 1px rgba(0, 0, 0, 0.1);         color: #996633;         float: left;         font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;         font-size: 0.75em;         font-weight: bold;         list-style: none outside none;         margin: 0 0 7px 20px;         padding: 0.417em 0.417em 0.417em 0.917em;         position: relative;         text-decoration: none;         text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);         z-index: 1;     }   

Blue Customized Labels Widget.

  .Label li:before {
        background-image: -moz-linear-gradient(center top , #1E5799 0%, #207CCA 100%);
        border-bottom: 1px solid #145091;
        border-left: 1px solid #145091;
        content: "";
        height: 1.39em;
        left: -0.69em;
        position: absolute;
        top: 0.2em;
        transform: rotate(45deg);
        width: 1.3em;
        z-index: 1;
    }
    .Label li:after {
        background: none repeat scroll 0 0 #FFFFFF;
        border: 1px solid #3F6893;
        border-radius: 4.167em 4.167em 4.167em 4.167em;
        box-shadow: 0 1px 0 #B5D8FF;
        content: "";
        height: 0.5em;
        left: -0.083em;
        position: absolute;
        top: 0.667em;
        width: 0.5em;
        z-index: 9999;
    }
    .Label li {
        background-image: -moz-linear-gradient(center top , #1E5799, #207CCA);
        border-bottom: 1px solid #145091;
        border-radius: 0 0.25em 0.25em 0;
        border-right: 1px solid #145091;
        border-top: 1px solid #145091;
        box-shadow: 0 1px 0 #CCE4FF inset, 0 1px 1px rgba(0, 0, 0, 0.1);
        color: #996633;
        float: left;
        font-family: 'Helvetica Neue',Helvetica,Arial,sans-serif;
        font-size: 0.75em;
        font-weight: bold;
        list-style: none outside none;
        margin: 0 0 7px 20px;
        padding: 0.417em 0.417em 0.417em 0.917em;
        position: relative;
        text-decoration: none;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
        z-index: 1;
    }