Customize Blogger Labels into Leaf style

Blogger labels are used to specified categories of different post. With labels you can easily differentiate  different posts by creating different groups with help of labels. So everyone wants beautiful and professional looking blog but unfortunately bu default blogger labels are not designed. So don't worry you can easily customize your blogger labels with the help of CSS code. In previous post we discuss that Customize Blogger Labels into Clouds and today i will show that how to customize blogger labels into Leaf style. Follow the below steps.

• Goto your blogger account and login it with your username and password.
• Click on the template and then on the EDIT HTML.
• Find ]]></b:skin> in your template.
• Paste the below code just above ]]></b:skin>

.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; -webkit-box-shadow: inset 0 1px 0 0 #96ca6d;  -moz-box-shadow: inset 0 1px 0 0 #96ca6d;  box-shadow: inset 0 1px 0 0 #96ca6d;  background-color: #7fbf4d;  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7fbf4d), color-stop(100%, #63a62f));  background-image: -webkit-linear-gradient(top, #7fbf4d, #63a62f);  background-image: -moz-linear-gradient(top, #7fbf4d, #63a62f);  background-image: -ms-linear-gradient(top, #7fbf4d, #63a62f);  background-image: -o-linear-gradient(top, #7fbf4d, #63a62f);  background-image: linear-gradient(top, #7fbf4d, #63a62f);  border: 1px solid #63a62f;  border-bottom: 1px solid #5b992b; color:#fff; text-decoration:none;border-bottom-right-radius: 30px;border-top-left-radius: 30px; -webkit-transition: all .5s ease-in-out;-moz-transition: all .5s ease-in-out;-o-transition: all .5s ease-in-out;transition: all  .5s ease-in-out; } .label-size a:hover{text-shadow:5px 5px 5px #dcdcdc;background:orange;border:1px solid orange;border-bottom-right-radius: 0px;border-top-left-radius: 0px;border-bottom-left-radius: 30px;border-top-right-radius: 30px;}

• Now you just need to save your template.
• Click on save button and goto your blog and see your blog.

If you need any help just share your problem with us in comment box and we will help as soon as possible :)