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

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

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