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'>
<ul>
<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:if>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div></p>
</div>
</b:includable>
</b:widget>


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.

Customization

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>:

<style>
#topmenu {
float:left;
width:100%;
font-size:93%;
line-height:normal;
}
#topmenu ul {
margin:0;
padding:10px 10px 0;
padding-top:0;
list-style:none;
}
#topmenu li {
float:left;
margin:0;
padding:0 0 0 9px;
}
#topmenu a {
display:block;
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;
font-weight:bold;
}
</style>


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.

33 comments:

  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.. :)

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

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

    ReplyDelete
  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

    ReplyDelete
  5. Nice article to improve my Blog lay out...
    thanks...
    www.potire.blogspot.com

    ReplyDelete
  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

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

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

    ReplyDelete
  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?

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

    ReplyDelete
  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

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

    ReplyDelete
  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.
    cheers,
    andrew

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

    ReplyDelete
  15. I dont think googlebot index /search/blah on a blogger site though see:
    http://blogging.nitecruzr.net/2008/07/google-webmaster-tools-and-label.html

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

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

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

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

    ReplyDelete
  19. This doesn't work

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

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

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

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

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

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

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

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

    ReplyDelete
  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

    ReplyDelete
  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

    ReplyDelete