Hello Friends Today I Am Gonna Show You How To Customize Blogger Labels With Css Effects.Its Looks Fabulous And Helps To Increase Your Blog Traffic.So Follow My Steps.....................
Open Your Blogger Account
Click On Template
Click On Edit HTML
Now Find The Following Code
]]></b:skin>
After Find The Code Paste The Below Code Before ]]></b:skin>
Yipeeeeeeeeeeeeeeeeeeeeeeee...........................................
Please Leave Your Question And Comment Below.........................
Open Your Blogger Account
Click On Template
Click On Edit HTML
Now Find The Following Code
]]></b:skin>
After Find The Code Paste The Below Code Before ]]></b:skin>
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{Now Save Your Template
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;
}
Yipeeeeeeeeeeeeeeeeeeeeeeee...........................................
Please Leave Your Question And Comment Below.........................
0 comments:
Post a Comment