Ultimate magazine theme for WordPress.

Wonderful and Gorgeous Css3 Labels / Category Widget For Blogger Users

70
In this post will help you to make attractive
your blogger category look.You can add it
to your blog easily.Im using CSS3 Gradients
and Box-Shadow for this modification.Check
blow image for example.Earlier i posted about
same trick Learn how to Change Blogger Label Links As Brick / Box Style . Follow below steps to add it to your
blog.

1. Log in to blogger account & Go to Template >> Edit HTML

2. Find this code  by using Ctrl+F  ]]></b:skin>

3.Paste below code Before ]]></b:skin> code:

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

 4. Now Click  Save Template.

    You are done…

Enjoy…










Disclosure: This page may contain external affiliate links that may result in us receiving
 a commission if you choose to purchase said product. The opinions on this page are our own.
 We do not receive payment for positive reviews.

Subscribe to our newsletter
Sign up here to get the latest news, updates and special offers delivered directly to your inbox.
You can unsubscribe at any time
Comments