Blogger Label Widget

Many blogger used a top navigation menu of main blog categories. To reflect your blog focus you would usually create these menus manually and update them from time to time. which is a hectic job for a blogger. 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 screen-shot above.

Basic Installation

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