How to add stylish Label widget to blogger

Hi guys,Today in this tutorial iam going to show you how to add stylish label widget to blogger.This labels help the visitors easily to jump from one category to another category without waisting the time.This label widget also increases the blog traffic since the visitors can easily identify the categories of your blog directly through this labels.It shows all the related posts of that category with an single button.So,In this article i will show you in detailed view how to add a custom label widget to blogger.Just follow the below steps to get this label widget to your blog.

              

Steps to Follow

• sign in to your blogger dashboard.
  
• Now go to template>Edit HTML.
  
• Now search for "]]></b:skin>" by pressing ctrl+F.
  
• Now place the below label code just above the "]]></b:skin>" .
  

Music from spider web

CODE 1

.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 {
    colour: #fff;
    text-decoration: none;
}

Use web browser as calculator

CODE 2.

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

• Now click on save template then check your page it will be with beautiful label widget.That's all guys now your label widget will appear on your page,Get many tricks like this on my next articles. How to lock a folder with Notepad