Stylish Animated Border Style Labels Widget for Blogger (CSS)

Blogger labels are used for specifying categories of the posts. By using labels in your blogger blog you can differentiate among different types of posts from each other by creating their groups. Default blogger labels are not styled well. Which results in bad overall design of a blog but don`t worry these blogger labels can be easily customized using a small CSS code

How Navigation Labels Improve SEO

Every time you write a post on your blog you have the option to add some Labels to that post.While most Bloggers don't give much thought to the labels they use and some don't add any labels at all they can be very beneficial to your blog in a number of ways, but only if used correctly.Using labels in the correct manner can help your blogs performance in Search, leading to more traffic and labels can be a great way for visitors to navigate your blog keeping them browsing through your archive.So by simply following a few rules and putting some thought into the labels you select you can get more traffic to your blog and increased page views from that traffic...Read more

Tested in> Firefox 4, Safari 4, Chrome 13, Opera 10, IE 8

How to Add Animated Border Style Labels Widget in Blogger

Go to Blogger >> Layout>>Add Gaget
Choose “Labels” Widget.
Change Settings Like The Image Below

Go to Blogger >> Template >> Edit HTML
Now Find ]]></b:skin> ( Press Ctrl+F button from keyboard to find)
Copy and Paste The Following Code Above ]]></b:skin>

/--------BLOGGERPLANET.COM —————- */
.label-size{
margin:0;
padding:0;
position:relative;
}
.label-size a{
float:left;
height:18px;
line-height:18px;
position:relative;
font:14px verdana;
margin-bottom: 9px;
margin-left:10px;
padding:10px;
color: #fff;
background: #48C9FF;
background: -webkit-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
background: -moz-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
background: -ms-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
background: -o-linear-gradient(top, #48C9FF 0%, #2EA8E5 100%);
background: linear-gradient(to bottom, #48C9FF 0%, #2EA8E5 100%);
text-shadow: #29a3cc 0 1px 3px;
text-decoration:none;
border-top-left-radius: 10px 50px;
border-bottom-left-radius: 10px 50px;
border-top-right-radius: 10px 50px;
border-bottom-right-radius: 10px 50px;
-moz-border-radius-topleft: 10px 50px;
-moz-border-radius-topright: 10px 50px;
-moz-border-radius-bottomright: 10px 50px;
-moz-border-radius-bottomleft: 10px 50px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.label-size a:hover
{
-moz-border-radius-topleft: 50px 50px;
-moz-border-radius-topright: 50px 50px;
-moz-border-radius-bottomright: 50px 50px;
-moz-border-radius-bottomleft: 50px 50px;
border-top-left-radius: 50px 50px;
border-bottom-left-radius: 50px 50px;
border-top-right-radius: 50px 50px;
border-bottom-right-radius: 50px 50px;
}

Costimization:

Font-size: 14px; = This is the Font Size of Labels/Tags that is displayed on your blogger. You can easily customize its font with your own choice.

Color: #fff; = This will change the Text Color of Labels/Tags that is displayed on your blogger. You can easily customize its font with your own choice. You may generate colors from HEX wheel color generator or use our HTML color generator tool to generate color codes own your desires.

If you have any doubt in your mind, you may ask via comments or contact form.

DON'T FORGET TO "SUBSCRIBE" or"LIKE" FOR FURTHER UPDATES