Make your Blogger Label Attractive and Neat :)

By Pravin Purohit   Posted at  00:47   Blogger 1 comment


 


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. inspect-element-chromeSo 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

About the Author

Pravin Purohit is authour at hackmadeeasy. he is a web developer . he loves to develope new things . he is master at creating android apps and is a famouse internet marketer too. his new blog its http://TechTreat.in .
View all posts by: Pravin Purohit

1 comment:

Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.

Back to top ↑
Connect with Us

    Popular Posts

    Follow our updates

    Total Pageviews

Contact us

Name

Email *

Message *

Like us

Recent Comments

© 2011-2013 Hack Made Easy. All rights reserved.