How to customize Label In Blog 2015 ?

Hey My Dear Friends,

Welcome to the shout mind blog, Today i have so many question about blog that how to customize Label . Because the label are very main part of the blog.They work like a categories of your website.

So, Friends its compulsory to make them cool and stylish to attract the new user or get more views.

Ok let me start the tutorial ….  

               Labels widget displays list of the categories of posts. Creating labels helps to categorize the posts in groups. So it helps visitors to see the posts under a category. Default blogger Labels widget is not so Stylish. Don’t worry, here I am sharing some cool interesting labels widget styles for you. This Labels widget can style using simple CSS codes. To do this follow the steps..

  1. Go to blogger.com
  2. Go to Template tab
  3. Click on edit Template
  4. Find ]]></b:skin> and copy the code of label style you like above ]]></b:skin>

 

BLACK THEME LABEL 

 

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

 

 

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

 

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


    }

5.  And save template



This is very cool to customized labels in blog.

So friends keep enjoying and be happy .

Add Comment