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. Visit Blogger.com > Template > Edit HTML.
2. Now press Ctrl+F and search for ]]></b:skin> and paste below code above it.

#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. 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.