Make your Blogger Label Attractive and Neat :)

 

What are Labels.

Labels is a thing that is used mostly in blogs for arranging the posts according to its type or category. It is very important to arrange the labels properly and give a perfect label to the post before publishing. Labels are also very usefull to keep visitors a long on the site/blog . Default Blogger Labels are avaiable in two types.

• Grid
• List

so , we are today going to change grid style of  bloggger labels using a simple CSS.

So wont you want to have a attractive wordpress like labels to blog.

Add CSS to Blog

To be honest, there is no complexity in this tutorial because all we need to do is to insert a CSS to our Blog, and it would do the job quite effortlessly.

1. Go to Blogger.com >> Templates >>EDIT HTML >> Proceed.
2. Now in the theme Search for ]]> .
3. and above it Paste the Below CSS Coding.
4. Then Click Publish.

#Label1 a{
line-height:20px;
font-family:Tahoma, Segoe UI;
text-transform:capitalize;
background: whitesmoke;
border: 1px solid #E6E6E6;
font-size:13px!important;
display:inline-block;
-webkit-border-radius: 5px;
-moz-border-radius:2px;
border-radius: 5px;
margin:0 0 5px 0;
padding: 2px 9px;
border-bottom-width: 3px;}
a:link,a:visited,a:active,a:focus{color:#666;
outline:0 none;
text-decoration:none;}
min-height:800px;
color:#5e6066;
background:#f8f9fa
}

 

Congrats you've successfully added stylish WordPress look alike labels to Your Blog.

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.

How This CSS was Made?

  Well I wont make this post longer so I'll tell in short about CSS codes used so that even You can custumize it :)  

• First to make text in label beautiful & attractive we added fonts Tahoma & Segoe UI to Texts and also made letters capital to look better. line height is for proper padding.

line-height:20px;
font-family:Tahoma, Segoe UI;
text-transform:capitalize;

• Then for exact color like wordpress labels we added whitesmoke to background & a 1px border around it

background: whitesmoke;
border: 1px solid #E6E6E6;
display:inline-block;

• We also added a rounded border to make it pretty ;)

-webkit-border-radius: 5px;
-moz-border-radius:2px;
border-radius: 5px;
margin:0 0 5px 0;
padding: 2px 9px;
border-bottom-width: 3px;}

 

• Lastly to prevent overwriting of original CSS code of bloggers theme we added custom links to tag to prevent it from looking uglier.

a:link,a:visited,a:active,a:focus{color:#666;
outline:0 none;
text decoration:none;}

Thats it ! How a Good Day & Please  do comment if you have any query or suggestions , We L♥ve it :D