Leaf Look To Blogger Labels

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 alltechcorner.com
add a label widget in blogger

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

add a label widget in blogger alltechcorner.com  
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.

More Videos

About All Tech Corner 69 Articles
All Tech Corner is all about latest Technology News, updates from the world of mobile phones, gadgets, computers, tricks and tutorials. We work hard to serve you best and to satisfy your hunger of Technology

Be the first to comment

Leave a Reply

Your email address will not be published.


*