How to Customize Blogger Labels & Make Them Attractive

Well you might have figured out that I have entirely customized my blogger template according to my taste and the one thing I love are the labels that simply categorizes your content according to what it comes in. So by default blogger provides a simple option to add labels and than choose from two different schemes the one is straight way of displaying your labels and the one is cloud style.

Well I am using the cloud version and I have just added some CSS styles that I have created by my own to modify the overall look of it. So you can see in the above image what kind of look you will get when you will apply the below CSS.

Well obviously you can edit the styles according to your preference or maybe add some more interactivity to it that depends on your creativity. So now jump in to the below tutorial and lets start the process.

1. Open Blogger > Template > Edit HTML.
2. Now press Ctrl + F and search for ]]></b:skin> and paste below code above it. HackingUniversity Style - Well below code will change your labels like I have on my blog, there are many different styles like leaf and other check below.

   #Label1 a{background:#f6f6f6;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));border:1px solid #aaa;display:inline-block;font-family:cambria;font-size:10px;letter-spacing:1px;margin:3px 0;padding:6px;text-transform:uppercase;-moz-box-shadow:0 5px 5px -5px #999;-webkit-box-shadow:0 5px 5px -5px #999;box-shadow:0 5px 5px -5px #999;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}#Label1 a:hover{border:1px solid #666;color:#000}

3. Green Leaf - If you wanna change your labels into some nice green leafy style then instead of above code paste below 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:0 1px 0 0 #96CA6D inset;color:#FFF;float:left;font:14px verdana;height:18px;margin-bottom:9px;margin-left:10px;padding:10px;position:relative;text-decoration:none;transition:all .5s ease-in-out 0}.Label a:hover{background:none repeat scroll 0 0 orange;border-radius:0 30px 0 30px;border:1px solid orange;text-shadow:5px 5px 5px #DCDCDC}.Label{margin:0;padding:0;position:relative}.Label li:hover{transform:rotate(5deg)}.Label li{float:left;font-size:116%;list-style:none outside none;transition:all .3s ease 0}

4. Black Brick - This is another one, now you can change your blogger labels into a black bricks kind of thing.

   .Label li{background:linear-gradient(to bottom,#6B6B6B 0%,#6B6B6B 4%,#333 1%,#2B2B2B 100%) repeat scroll 0 0 transparent;border:1px solid;border-radius:6px 6px 6px 6px;float:left;font-size:116%;list-style:none outside none;margin:2px;padding:4px;transition:all .3s ease 0}.Label li:hover{transform:rotate(351deg) scale(1.7)}.Label a{color:#fff;text-decoration:none}

5. Metro Style - Well if you wanna go with something latest then Metro Style could be your choice, check below code.

   .Label a{background:#0090D5;padding:0 10px;color:#fff!important;height:26px;line-height:26px;text-decoration:none;border:none!important;-webkit-transition:all .3s ease-in-out!important;t:30pxt: 30px;float:left;margin-left:1px;margin-top:1px;font-size:13px}.Label a:hover{background:#69625A;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:px}

6. Now this is the default code for modifying labels in blogger template, if this code does not work you might have something else constructing your blogger labels.

What if the above code does not work ?

This can be due to code your blogger labels are created with, just follow below steps to see your appropriate code and replace it with above CSS code.

1. So what you can do is just right click on your label in chrome browser and you will see something like in the image on the right, it’s the code constructing your labels.
2. So now just change the above CSS code starting with that code you found and it will work fine.

So that’s it this tutorial will give your labels a new look and will surely attract your readers to click on them and see how they work :) So do comment if you find any problems installing these CSS styles.