How I Customize Labels Widget With Stylish Cool Effect

Yesterday I wrote on how to add label widget to blogger blog. Today I will be showing you how I customize the label widget with stylish cool effect to bring about attractiveness to my blog readers.

The main reason I am writing this particular post is because my blogger friend asked a popular question “how did you do it?”. So I decide to post it here for you all to see instead of just my friend only.

Below is the image of my customized label widget

If you are reading this post and you have not grouped your blog post into labels, this won’t work for you. See How to group blog post into label (categories) to group yours now.

How Can I Customize Label Widget With Stylish Cool Effect?

Without wasting much time, follow the below procedure to customize your label widget………..

1. Sign in to Blogger Dashboard

2. Go to Templateà Edit HTML

3. Click inside the HTML Box containing all template code, hold CTRL and F.

4. A search box will display inside the HTML Box

5. Copy ]]></b:skin> and paste it inside the search, then click enter button on your computer keyboard.

6. The code ( ]]></b:skin> ) will be automatically highlighted in the template box.

7. Copy any of these below label styles you like directly above ]]></b:skin>

8. Then click Save Template button.

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

}

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

    }

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

    }

.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(5deg);

    }

.Label a {

color: #fff;

text-decoration: none;

}

.Label a {
    color: #000000;
    text-decoration: none;
}
.Label li {
    border: 1px solid #000;
    border-radius: 6px 6px 6px 6px;
    color: #000000 !important;
    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(5deg);

}

.Label a:hover
{
text-shadow:5px 5px 5px #dcdcdc;
background:orange;
border:1px solid orange;
border-bottom-right-radius: 0px;
border-top-left-radius: 0px;
border-bottom-left-radius: 30px;
border-top-right-radius: 30px;
}

.Label li {

border: 1px solid;

border-radius: 6px 6px 6px 6px;

color: #000000 !important;

float: left;

font-size: 116%;

list-style: none outside none;

margin: 2px;

padding: 4px;

transition: all 0.3s ease 0s;

}

.Label a {

color: #000;

text-decoration: none;

}

.Label li:hover {

transform: rotate(5deg);

}

.Label a {
     -moz-border-bottom-colors: none;
     -moz-border-left-colors: none;
     -moz-border-right-colors: none;
     -moz-border-top-colors: none;
     background-color: #7FBF4D;
     background-image: -moz-linear-gradient(center top , #7FBF4D, #63A62F);
     border-bottom-right-radius: 30px;
     border-color: #63A62F #63A62F #5B992B;
     border-image: none;
     border-style: solid;
     border-top-left-radius: 30px;
     border-width: 1px;
     box-shadow: 0px 1px 0px 0px #96CA6D inset;
     color: #FFFFFF;
     float: left;
     font: 14px verdana;
     height: 18px;
     margin-bottom: 9px;
     margin-left: 10px;
     padding: 10px;
     position: relative;
     text-decoration: none;
     transition: all 0.5s ease-in-out 0s;
}

.Label a:hover {
     background: none repeat scroll 0% 0% orange;
     border-radius: 0px 30px 0px 30px;
     border: 1px solid orange;
     text-shadow: 5px 5px 5px #DCDCDC;
}

.Label {
     margin: 0px;
     padding: 0px;
     position: relative;
}

.Label li:hover {

transform: rotate(5deg);

}

.Label li {

float: left;

font-size: 116%;

list-style: none outside none;

transition: all 0.3s ease 0s;

}

Enjoy ##

What’s your say on this?

Kindly let us know via the comment box below.