Customize Blogger Labels With CSS Effects.

Hello Friends.Today I am gonna show you How To Customize Blogger Labels With CSS Effects.So Follow My Setps.....................

1) Open Your blogger Account.

2) Go To Templates.

3) Edit HTML.

4) Press Ctrl+F

5) Now Find The Following Code ]]></B:SKIN>

6) After Find The Code Paste The Below Code

Before ]]></b:skin>

Now Save Your Template

Code:

LEAF THEME WITH CSS 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;

}

BLACK BRICK CODE

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

}

METRO STYLE CODE

.Label a{

padding-left:10px;

background:#0090D5;

padding:0 10px;

color:#fff!important;

height:26px;

line-height:26px;

text-decoration:none;

border:none !important;

-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;

float:left;

margin-left:1px;

margin-top:1px;

font-size:13px; }

.Label a:hover{

background:#69625A;

-webkit-border-radius: 1px;

-moz-border-radius: 1px;

border-radius: px;

}

Customize Blogger Labels With CSS Effects.