Monday, 1 July 2013

Tagged under: ,

Customize Label Widget For Blogger

Customize Label Widget For Blogger
Customize Label Widget brings more beauty in blogger blog. It will make our blog more attractive and designable. We know that by default blogger cloud label widget looked ugly and unprofessional however, if we add some piece of code to style sheet then it could become an eye-catcher for readers & make our blog design lovely. This widget is mostly appeared at the right side of the blog which consist of several labels. Today we will present  an awesome blue color cloud label widget which we have personally implemented on PBT. Since from a long time we have received budles of email from reader to share the PBT labels widget with us. So in today article we will share with you customized label widget for blogger.

Label Widget For Blogger

Well guys you all of know that every blogger use label widget in blog to navigate or jump from one category into another without search any post by Search Engine.  This widget help us to show all the related posts of the same category by single button. So we could easily click on desire niche label to view all the posts of related topics. So in this way we can find multiple posts of the same topic with single label button.

In official term it will be defiened by Hafeez Ullah Khan like this way.

A  label  widget  is  an  automated  and  official  part  of  a  blog  which  can  be  interlinked and  hold  bundles  of  posts  with  a  single  tab  to  find  multiple  posts  easily  of  the  same category.

How to Add Customize Label Widget in Blogger Blog


label widget for blogger
Here is all the beginner steps that you will learn how can we apply any Css designing to labels widget.
  1. Go to blogger dashboard:

  2. Go to Template>>Edit/Html:

  3. Now Search for ]]></b:skin> tag

  4. Past the below given code before ]]></b:skin> tag 


beautiful label widget for blogger

beautiful label widget for blogger


.label-size{
 margin:0;
 padding:0;
 position:relative;
 }
 .label-size a{
 float:left;
 height:24px;
 line-height:24px;
 position:relative;
 font-size:12px;
 margin-bottom: 9px;
 margin-left:20px;
 padding:0 10px 0 12px;
 background:#0089e0;
 color:#fff;
 text-decoration:none;
 -moz-border-radius-bottomright:4px;
 -webkit-border-bottom-right-radius:4px;
 border-bottom-right-radius:4px;
 -moz-border-radius-topright:4px;
 -webkit-border-top-right-radius:4px;
 border-top-right-radius:4px;
 }
.label-size a:before{
 content:"";
 float:left;
 position:absolute;
 top:0;
 left:-12px;
 width:0;
 height:0;
 border-color:transparent #0089e0 transparent transparent;
 border-style:solid;
 border-width:12px 12px 12px 0; 
 }
.label-size a:after{
 content:"";
 position:absolute;
 top:10px;
 left:0;
 float:left;
 width:4px;
 height:4px;
 -moz-border-radius:2px;
 -webkit-border-radius:2px;
 border-radius:2px;
 background:#fff;
 -moz-box-shadow:-1px -1px 2px #004977;
 -webkit-box-shadow:-1px -1px 2px #004977;
 box-shadow:-1px -1px 2px #004977;
 } 

.label-size a:hover{background:#555;}
.label-size a:hover:before{border-color:transparent #555
 transparent transparent;}
Finally Click on save button & you done almost:





Want Help ?

Buddies this was a little tutorial all about how to add customize label widget in blogger blog. If you like this widget then you must try to use it it will definitely bring dramatics change in your blog designing. If somebody want a professional label widget for blogger then i will recommended to use this widget for blogger blog. we have personally implement this widget on our blog.

Guys if you found any bugs or face any difficulty in implementation then do not hesitate to post your problem in comment section. we will back your response as soon as possible. Thanks and happy blogging !

25 comments:

  1. Hafeez Brother as usual another great post from you! Yes this is one of the best label widget for blog.
    one more thing brother if you want to change the color you can change all the values of this code "0089e0" which is blue i guess and similarly if you don't want to show the numbers in label then just edit the widget and unchecked this option "Show number of posts per label"

    ReplyDelete
    Replies
    1. You are right saqib ahmad bro, by following your trick we could easily customize these things inside this widget. thanks for your catchy comments.

      Delete
  2. So Hafeez bro, finally you have shared your labels design with us.
    Incredible labels design, like yours, really add more beauty and charm in our blog and attract our readers to check out more posts tagged under that label.
    Really a cool design bro :)
    Regards!
    Your younger brother - Ankit

    ReplyDelete
    Replies
    1. Thank my Dear, This is really a professional looks label widget for blogger users. it will make our blog design more attractive. we should must try to implement this on our blog.

      Delete
  3. cool, bro , i am searching for this only thanks for this, really this will look so beautiful will surly add value to the blog template.. keep it up

    ReplyDelete
    Replies
    1. Thanks Umesh Bro for your kindly comments. This is one of the best and pro designable label widget for blogger blog. This widget is used by many blogger we should also try to check this on our blogs. Thanks once a again.

      Delete
  4. hai bro..
    nice post
    thanking you
    i got it i have changed it for my blog www.alltechvillas.com
    thanking you
    for nice information

    ReplyDelete
  5. Nice Widget Hafeez Dude.! Bro I Want To Post A Guest Post On Your Blog Can I.....!!!!
    Best Wishes:
    http://bloggertechniches.blogspot.com/2013/06/how-to-use-php-on-blogger-beginners.html#

    ReplyDelete
  6. I always wanted to have my Customize Label Widget and you have explained it very wall. Thanks for such a nice post.
    http://pakistanlearningcenter.blogspot.com/

    ReplyDelete
  7. Very nice post. Thanks i will use this in my blog. And can u please email me your current blogger template. please email me at gupta.nirmal0@gmail.com.

    ReplyDelete
    Replies
    1. Check your email i will sent it soon.

      Delete
    2. I have not received your template. Please send it as soon as possible.

      Delete
    3. sorry the email i gave you is wrong. Sorry for the mistake. This is the correct email gupta.nirmal10@gmail.com.

      Delete
  8. Incredible Widget this will help readers to navigate categories easily with the help of labels widget
    Well lot's of Friends Searching in Google this widget and Finally they got it thanks for this post Hafeez brother My Guru
    Best Of luck
    Regars
    R.S

    ReplyDelete
  9. yes brother agree with your point ( by default label Widget look ugly ). with this customize label we can increase our blog beauty. and Sky blue color is my favorite color. thanks for brother.
    My recent post: http://w3mix.com/ramadan-mubarak-messages/

    ReplyDelete
  10. There is problem in this given CSS, try clicking it and see the clicked label. It is just a normal word (without any CSS) left after clicking it. I think CSS is to be improved.

    ReplyDelete
  11. hai bro..
    nice post
    thanking you
    i got it i have changed it for my blog www.aUINSNBLOG.BLOGSPOT.com
    thanking you
    for nice information

    ReplyDelete
  12. ... dear hafeez these codes are not available in my blog? what should i do?

    ReplyDelete
    Replies
    1. Oh buddy add this code. this is not available in any template. you have to add this code by follow the above method.

      Delete
  13. hafeez bhai i don't have ]]> code in my template so what to do ?? please guide me

    ReplyDelete
  14. Mail me this answer on this EMAIL | Rjshehryarmarri@gmail.com

    ReplyDelete
  15. Good evening Hafeez bhai :)
    I wished to apply the effect you have applied in "recommended post". when we hover it changes to arrow.

    I applied this labels code in b skin. But it isn't working. Plz chk bro at : http://engineersevanigam.blogspot.in/

    ReplyDelete
  16. Great Work Bro...I added It To My Blog

    Regards,
    www.newblogger-tricks.com

    ReplyDelete
  17. Hi Hafeez..Fantastic tutorials..I added this code and it is not working on my blog..I couldnt figure out the error..If you could you help me out,it would be great..

    ReplyDelete
  18. It is very good label design. I used on Electrical Objective Questions blog.
    Thanks admin.

    ReplyDelete

About ProBloggerTricks

Founded in 2013, Pro Blogger Tricks is the ultimate resource for bloggers and marketers. Looking for ways to make money online? Need blogging tips, SEO tips and other business and marketing related content? Probably, the best source of information about monetizing a blog ....Read More

Copyrights @ 2014, Pro Blogger Tricks - Designed By Templateism