Customize Blogger Labels To Look Like Leaves

Do you want to customize your labels view to leaf view in your blogger? Then you are at correct place. Making your labels look like different can make you gain more number of visitors to the blog.

As shown in image above you can customize your blogger labels look like leaves. Follow the following steps.

Step 1: In order to customize your label view, first of all you have to add Labels Gadget to your blogger. If you don't know how to add a label gadget just go to Dashboard --> Layout

Now Click on Add a Gadget. You will get an pop up window like the image below.

add a label widget in blogger

Now click on + button beside it and you will get an another window like the below image

  

Click on Save.

Step 2:  Go to your Dashboard click on Template.

Now Click on Edit HTML.

If you don't know how to edit your blogger template, check my article How to edit your blogger template effectively.

Step 3: Now search for ]]></b:skin> in your code by using CTRL+F option.

Step 4: Now just before the ]]></b:skin> copy and paste the following code

.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;
}
/* www.AllTechCorner.com */
.Label {
margin: 0px;
padding: 0px;
position: relative;
}
.Label li:hover {
transform: rotate(5deg);
}
.Label li {
float: left;
font-size: 116%;
list-style: none outside none;
transition: all 0.3s ease 0s;
} /* www.AllTechCorner.com */

Step 5: Now save the code and check your website. Do let me know if you have any doubts.