Jan 2, 2010

Blogger Label Widget

blogger label navigationMany blogs use a top navigation menu of main blog categories. To reflect your blog's focus you would usually create these menus manually and update them from time to time. An alternative is to have the menu automatically generated for you based on the frequency of the post labels (categories). This is what this widget does. You might want to try it out.

This is a simple extension of the blogger label widget. I will show how to install a label navigation menu similar to the one you can see in the screenshot above.

Basic Installation

You can install it by editing the blogger template and pasting the widget code where you want it to appear. If you want it to appear before your posts you would paste it above the following line:
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>

Here comes the widget code you would paste into your template:
<b:widget id='Label1' locked='false' title='Browse Topics' type='Label'>
<b:includable id='main'>
<div class='widget-content'>
<p><div id='topmenu'>
<b:loop values='data:labels' var='label'>
<b:if cond='data:label.count&gt;4'>
<span style='white-space:nowrap;'><li><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'</li></span>
<b:include name='quickedit'/>

The red bold number is a threshold for the minimum number of posts that is necessary for inclusion of the label into your menu. In this case only labels with more than 4 posts are listed. You might want to adjust this number to have enough menu items but not too many.

Note that in order to get an efficient navigation you need a clean label system. You might want to read google help for editing labels of multiple posts at once.


There are many ways you can make the menu look better using some style. Here is an example. Paste this code into your template above the </head>:

#topmenu {
#topmenu ul {
padding:10px 10px 0;
#topmenu li {
padding:0 0 0 9px;
#topmenu a {
color: #ffffff;
text-shadow: 1px 1px 1px #000;
border: solid thin #882d13;
-webkit-border-radius: .7em;
-moz-border-radius: .7em;
border-radius: .7em;
-webkit-box-shadow: 2px 2px 3px #999;
box-shadow: 2px 2px 2px #bbb;
background-color: #ce401c;
background-image: -webkit-gradient(linear, left top, left bottom, from(#e9ede8), to(#ce401c),color-stop(0.4, #8c1b0b));
padding:5px 15px 4px 6px;

This brings the links in form of buttons. Credits go to Ethan Marcotte for the centered tabbed navigation and to John Allsopp for the button look,as described in in his article Shiny Happy Buttons.

Enjoy. Please vote this post up if you like it and leave a comment below for questions and suggestions.


  1. Wow thanks for informing this.. I had been trying to search for a tutorial on how to do that ever since I changed my blog to a dot com. I'll try this out soon.. :)

  2. i think this is waht i need after i changed my template. thanks for this.

  3. I like this widget a lot (sorry for the self-promotion ;). It forces you to systematically categorize your posts. From time to time you'll have to adjust the threshold.

    Before, I was using images for the buttons (using background-url in topmenu a property in css). A few days ago before writing the article I changed all buttons from images to browser generated buttons and I think my blog has become much faster since then. Note the caveat that these buttons look different on firefox, opera, safari, and internet explorer.

  4. I think this widget has a lot of potential to become very popular. Using this widget, I would be able to save 5 minutes on each post because I wouldn't have to categorize each post. Those 5 minutes would be a lot better spent promoting my blog or writing new content. I think that I might try out this widget for my blogs.

    PS From EC

  5. Nice article to improve my Blog lay out...

  6. Hello
    This is a nice post.You have described very good about installation of label navigation menu.Thanks for giving that codes of widget.This will be very helpful.

    hoodia gordonii

  7. @Abhiseqa Says: You're welcome. I hope you'll find it useful.

  8. how did you change your blog to a dot com ive been wishing to do that for ages

  9. Well, this looks to be a nice idea, but I must be stupid because I can't get even your 'basic installation' code to work.

    After I paste your code into my blog's HTML I get an error about mis-matched tags.

    You can see the cause of the error in line 8, the line that starts

    span style='white-space:nowrap;'>
    and then has a couple of 'expr' clauses. There is an opening '<a' tag that is never closed, and no sign either of any matching '</a>' tag either.

    Any chance you could post a correction please?

  10. @mccoy54wru: Thanks for trying out my code and for the question. The code I use is a bit more complicated than the own shown here, because I put in custom popup boxes for navigation, and I must have made a sloppy error when shortening the tags for the post.

    Currently I am not able to save changes to the post. The line should read like this:

    <span style='white-space:nowrap;'><li><a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a></li></span>

    Please tell me if it works now.

  11. Hi Benjamin,
    Yes the code is now working, I see my tags appearing at the top of the post as a list. Now I just need to change the appearance - aiming for something like you have at the top of this site.

    Thankyou for your assistance

  12. @mccoy54wru: You are welcome. Great that it works now. Do you want something like my tooltips?

  13. @Benjamin,
    Yes, I'd like something like the tag list you have at the top of this page, although looking at the page source, it looks like to me that you've hard coded it, rather than having it auto generated.

  14. @mccoy54wru: For the tag list on top of the page I use the label widget. This means the tags are auto-generated, no hard-coding.

  15. I dont think googlebot index /search/blah on a blogger site though see:

    Dont know if blogger intself generates a sitemap that it could follow instead or not.

  16. cool widget! How would you replace the code for the look of the buttons for actual JPGs uploaded online.

  17. My buttons use css with pictures + the button texts. If you want to use only a picture, just get rid of some of the CSS and put a picture instead.

  18. Thank you for sharing this information. It is very helpful

  19. This doesn't work

  20. This article is novel,
    Authentic Soccer Jerseys
     I really love it. I also have some ideas written in my article, you can have a look if you have the interest. barcelona jerseyWe can also discuss different topics.

  21. The code I use is a bit more complicated than the own shown here, because I put in custom popup boxes for navigation..

  22. If you want to use only a picture, just get rid of some of the CSS and put a picture instead.

  23.  If you want to use only a picture, just get rid of some of the CSS and put a picture instead.

  24. This is a nice post.You have described very good about installation of label navigation menu.

  25. Hi lastingrose. Seems you made it work after all. Looks good. I'd suggest you'd change the button colors a bit, though. 

  26. Good point. As far as I know, if you don't create special pages for each category there's no way around this. I moved the positioning of these non-follow links in order to have them appear later, which is probably better for SEO. 

  27. Thanks for looking up. I have changed the colours of the button as you have suggested. 

    BTW I didn't know you could create background image in css without an image. Many thanks for the lesson.

  28. Now the buttons look great on your site! 

    I really like these CSS buttons. They are fast to load and provide more flexibility than using images. Credit for the ideas with the css goes to http://24ways.org/2008/shiny-happy-buttons

  29. Does your website have a contact page? I'm having trouble locating it but, I'd like to

    send you an email. I've got some creative ideas for your blog you

    might be interested in hearing. Either way, great site and I look forward to seeing it

    expand over time.
    My website > galerieolsen.keogratuit.com