‘Customize Blogger Labels widget’ into Wordpress Style

Blogger labels widget does not look more attractive than wordpress labels.In the wordpress there are different  styles which satisfies maximum to the respective template.but the blogger labels widget looks same in all templates.so to customize it with css3 and make sidebar more good and attractive to visitors.I said before many times that our visitors return 25% back just for giving attractive looking.

PART1

1.Go to blogger.

2.Layout >> Add a Gadget >> Labels

3.Customize the labels widget as below image

4.Save it.

PART2

5.Template >> Edit html

6.Search for the below code using ctrl+f shortcut key.

]]></b:skin>

7.Add below code just before above code

.label-size {

float: left;

margin: 0 0 7px 20px;

position: relative;

font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

font-size: 0.75em;

font-weight: bold;

text-decoration: none;

color: #996633;

text-shadow: 0px 1px 0px rgba(255,255,255,.4);

padding: 0.417em 0.417em 0.417em 0.917em;

border-top: 1px solid #d99d38;

border-right: 1px solid #d99d38;

border-bottom: 1px solid #d99d38;

-webkit-border-radius: 0 0.25em 0.25em 0;

-moz-border-radius: 0 0.25em 0.25em 0;

border-radius: 0 0.25em 0.25em 0;

background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');

-webkit-box-shadow: inset 0 1px 0 #faeaba,

0 1px 1px rgba(0,0,0,.1);

-moz-box-shadow: inset 0 1px 0 #faeaba,

0 1px 1px rgba(0,0,0,.1);

box-shadow: inset 0 1px 0 #faeaba,

0 1px 1px rgba(0,0,0,.1);

z-index: 1;

}

.label-size:before {

content: '';

width: 1.30em;

height: 1.39em;

background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');

position: absolute;

left: -0.69em;

top: .2em;

-webkit-transform: rotate(45deg);

-moz-transform: rotate(45deg);

-o-transform: rotate(45deg);

transform: rotate(45deg);

border-left: 1px solid #d99d38;

border-bottom: 1px solid #d99d38;

-webkit-border-radius: 0 0 0 0.25em;

-moz-border-radius: 0 0 0 0.25em;

border-radius: 0 0 0 0.25em;

z-index: 1;

}

.label-size:after {

content: '';

width: 0.5em;

height: 0.5em;

background: #fff;

-webkit-border-radius: 4.167em;

-moz-border-radius: 4.167em;

border-radius: 4.167em;

border: 1px solid #d99d38;

-webkit-box-shadow: 0 1px 0 #faeaba;

-moz-box-shadow: 0 1px 0 #faeaba;

box-shadow: 0 1px 0 #faeaba;

position: absolute;

top: 0.667em;

left: -0.083em;

z-index: 9999;

}

#Label1 {

height: 210px;

}

.label-size:hover {

background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');

border-color: #e1b160;

}

.label-size:hover:before {

background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));

filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');

border-color: #e1b160;

}

8.Save template and Bingo!