How To Add Custom Label Widget With Stylish CSS Effect In Blogger

Monday, January 13, 2014

How To Add Custom Label Widget With Stylish CSS Effect In Blogger

Add Custom Label With Stylish CSS Effect Blogger

I am write the article about - How to Change Blogger widget title background color - Today i am guide you about that, It is very easy, follow my instruction step by step, you can do this easily.

Lets Start Guys.

Step-1
Log-in To Your Blogger Account,

Step-2
Click on Template,

Step-3
Click on Edit HTML,

Step-4

Now Find The Following Code, ]]></b:skin>
(Hold Ctrl Button, Press F)

Step-5
After Find The Code Past The Below Code in The Box, Before, ]]></b:skin>

Here is The HTML Code

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

Metro Style Code

Here is The HTML Code

Step-6
Now Save Your Template,
That's all done, Enjoy Stylish CSS effect Blogger Label Widget.

Please Share This Article To Friends / Others.

Download Free Mobile Software