Home / Blogger / Customize Blogger label widget with CSS3

Customize Blogger label widget with CSS3

Customize Blogger label.Blogger label shows the list of categories of posts.Creating labels helps to find the post easily.But the default style of blogger label is not stylish.But i have many beautiful styles of blogger label.Now you can change your old label style to new one.There will more chance to get more page views by changing label style.If you want to change you old label style to new one and get more pageviews then follow the below steps: Step 1: Sign in to your blogger account. Step 2: Go to Template > Edit HTML. Step 3: Find ]]></b:skin> and paste the label code which you like above ]]></b:skin> Stylish 1:

Customize Blogger label widget with CSS3

Customize Blogger label widget with CSS3 Style 1

 

.label-size{ margin:0; padding:0; position:relative; } .label-size a{ float:left; height:24px; line-height:24px; position:relative; font-size:12px; margin-bottom: 9px; margin-left:20px; padding:0 10px 0 12px; background:#0089e0; color:#fff; text-decoration:none; -moz-border-radius-bottomright:4px; -webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px; -moz-border-radius-topright:4px; -webkit-border-top-right-radius:4px; border-top-right-radius:4px; } .label-size a:before{ content:””; float:left; position:absolute; top:0; left:-12px; width:0; height:0; border-color:transparent #0089e0 transparent transparent; border-style:solid; border-width:12px 12px 12px 0; } .label-size a:after{ content:””; position:absolute; top:10px; left:0; float:left; width:4px; height:4px; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; background:#fff; -moz-box-shadow:-1px -1px 2px #004977; -webkit-box-shadow:-1px -1px 2px #004977; box-shadow:-1px -1px 2px #004977; } .label-size a:hover{background:#555;} .label-size a:hover:before{border-color:transparent #555 transparent transparent;}

Click here to get the above code.

 

Style 2:

Customize Blogger label widget with CSS3

 

.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 {
    transformrotate(5deg);
}
.Label li {
    floatleft;
    font-size116%;
    list-stylenone outside none;
    transitionall 0.3s ease 0s;
}

Click here to get the above code.

Style 3:

Customize Blogger label widget with CSS3

 

.label-size a {

display: inline-block;

text-decoration: none;

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

padding: 4px 7px;

font-family: ‘Helvetica Neue’, helvetica, sans-serif;

font-size: 12px;

line-height: 14px;

height: 14px;

vertical-align: middle;

margin-bottom: 6px;

-webkit-border-radius: 4px;

-moz-border-radius: 4px;

border-radius: 4px;

-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);

-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);

box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), inset 0 1px 0 0 rgba(255, 255, 255, 0.4);

}

.label-size a {

color: #996633;

border: 1px solid #DDA13C;

background: rgb(238,177,75);

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlYjE0YiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNjYzkxMmQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(top,  rgba(238,177,75,1) 0%, rgba(204,145,45,1) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,177,75,1)), color-stop(100%,rgba(204,145,45,1)));

background: -webkit-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);

background: -o-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);

background: -ms-linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);

background: linear-gradient(top,  rgba(238,177,75,1) 0%,rgba(204,145,45,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#eeb14b’, endColorstr=’#cc912d’,GradientType=0 );

}

.label-size a:before  {

color: #FFFFFF;

margin-right: 4px;

font-size: 15px;

line-height: 13px;

height: 13px;

vertical-align: text-top;

text-shadow: 0 -1px -1px rgba(0, 0, 0, 0.2);

}

.label-size a:hover {

text-decoration: none;

background: rgb(240,183,86);

background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjc1NiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkNmEwNDQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

background: -moz-linear-gradient(top,  rgba(240,183,86,1) 0%, rgba(214,160,68,1) 100%);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,183,86,1)), color-stop(100%,rgba(214,160,68,1)));

background: -webkit-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);

background: -o-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);

background: -ms-linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);

background: linear-gradient(top,  rgba(240,183,86,1) 0%,rgba(214,160,68,1) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#f0b756′, endColorstr=’#d6a044′,GradientType=0 );

}

Click here to get the above code.

Comments

comments

About tahir

Muhammad Tahir lives in Lahore, Pakistan. Loves to read and write articles about tech and web resources online.

Check Also

How to Compress 1GB File to 100MB File

How to Compress 1GB File to 100MB File

Most of games on internet are highly compressed and small in size, but they take ...

How To Play Videos in HD by Default In Facebook

How To Play Videos in HD by Default In Facebook

Facebook a social networking site is also becoming a video hosting site.Now people are uploading ...

How to increase your Internet speed

How to increase your Internet speed

Double or increase your internet speed claims are based on lies.The purpose of these claims ...

Google Chrome Latest Official Full Standalone Offline Installer

Google Chrome is one of the best browser in the world. Millions of peoples are ...

Read Facebook Messages Without Their Senders Know

Read Facebook Messages Without Their Senders Know

Often after reading messages on facebook, we don’t want to give a quick reply and ...