Add New Beautiful Labels Widget For Blogger

By -
9 Flares Filament.io 9 Flares ×

Hy Friends Hope You All Fine and Enjoying The Life.Today I am Gonna Show You that How To Add  an Awesome/Nice And Beautiful Labels Widget To Blogger Using CSS3.The Blogger Default Label has Only Some Options for Customizing . But We Will Apply Pure CSS3 For Customizing Labels Widget.This Widget is Very Stylish and has Yellow Color.You Can See it From its Preview.Now if You Like it, So Let’s Add it To Blog.

customize-blogger-labels-with-css

How To Add New Beautiful Labels Widget To Blogger

Before Adding New Beautiful Labels Widget To Blogger,We Have To Edit Blogger Default Labels Widget and we have To Make Some Important Changes in That Widget.The Changes Which We Will Do in That Default Labels Widget is Shown in The Picture Below or Do Same as Shown in The Picture Below.

blogger-label-widget

Now Follow The Below Simple Steps For Adding New beautiful Labels Widget.

1) Go To Blogger.com

2) Then Go To Blogger Dashboard.

3) After That Click On Template.

4) Now After Clicking Template Click On Edit HTML.

5) Then Click On Proceed it.

6) After That Check The Box “Expand Widget Templates”.

7) Now Press CTRL+F a Box will Pop-up at The Top Right of Your Page , Now Search For This Code ]]> 

8) Now You Will Find This Code ]]> in The Template . 

9) After Finding The Code Copy The Below Script and Paste it Just Before/Above ]]> Tag.

.label-size {

float: left;
margin: 007px20px;
position: relative;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 0.75em;
font-weight: bold;
text-decoration: none;
color: #996633;
text-shadow: 0px1px0pxrgba(255,255,255,.4);
padding: 0.417em0.417em0.417em0.917em;
border-top: 1pxsolid#d99d38;
border-right: 1pxsolid#d99d38;
border-bottom: 1pxsolid#d99d38;
-webkit-border-radius: 00.25em0.25em0;
-moz-border-radius: 00.25em0.25em0;
border-radius: 00.25em0.25em0;
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: inset01px0#faeaba,
01px1pxrgba(0,0,0,.1);
-moz-box-shadow: inset01px0#faeaba,
01px1pxrgba(0,0,0,.1);
box-shadow: inset01px0#faeaba,
01px1pxrgba(0,0,0,.1);
z-index: 1;
}
.label-size:before {
content: '';
width: 1.30em;
height: 1.39em;
background-image: -webkit-linear-gradient(lefttop, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -moz-linear-gradient(lefttop, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -o-linear-gradient(lefttop, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: -ms-linear-gradient(lefttop, rgb(254, 218, 113), rgb(254, 186, 71));
background-image: linear-gradient(lefttop, 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: 1pxsolid#d99d38;
border-bottom: 1pxsolid#d99d38;
-webkit-border-radius: 0000.25em;
-moz-border-radius: 0000.25em;
border-radius: 0000.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: 1pxsolid#d99d38;
-webkit-box-shadow: 01px0#faeaba;
-moz-box-shadow: 01px0#faeaba;
box-shadow: 01px0#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(lefttop, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -moz-linear-gradient(lefttop, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -o-linear-gradient(lefttop, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: -ms-linear-gradient(lefttop, rgb(254, 225, 141), rgb(254, 200, 108));
background-image: linear-gradient(lefttop, rgb(254, 225, 141), rgb(254, 200, 108));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');
border-color: #e1b160;
}

10) Now Finally Hit Save Template and You Are Done xD !
 
~ If You Have Any Question Feel Free to Ask and Drop Comments Below xD !
Happy Blogging,Peace and Love xD !
9 Flares Twitter 0 Facebook 5 Google+ 4 Reddit 0 Filament.io 9 Flares ×

My Name is Umer i am a self made blogger, i learn blogging my own self, i love to learn more and share some best blogging tips on my this blog. I hope you may like my some articles special thank you to reading about my self. Please Check my Latest Project @ Templotic - Best Blogger Templates