Sunday, August 21, 2011

Adding label (category) tabs to navigation bar

How do you add a tab (on horizontal navigation bar) that shows all the posts that fall under a subject or category in Blogger?

tab display all posts that fall under a particular label category


Before I give a correct answer, let’s first see a popular-but-wrong DIY method (using Music category as an example):
  1. Create a page with “Music” as the title. “Music” tab will be added to the bar automatically. So far so good.
  2. Attempt to add music posts to the page. This is where it gets stuck, because posts can’t be added to pages.
  3. Mission failed.  
Well, that’s the end of that. 

The correct way of doing this is by adding a tab with a label URL used as the target link.  A label URL is a link that points to a label-search page. This page lists out all posts labeled with a particular label.
Here are the steps:

1. Label your posts

Label your posts according to subjects or categories (if you haven’t already done so). This is pretty basic, but if you don’t have the slightest idea what a label is or don’t know how to apply it, read How do I label my posts?.
You can also apply a label to multiple posts at once.


2. Get the label URL

You can get the URL to a label-search page by right-clicking on the hyper-linked label. In Firefox you select “Copy Link Location”, in Chrome select “Copy link address”, and if you are using Internet Explorer, select “Properties” and copy the link from there.

You can usually find the labels at the bottom of your post and in Labels gadget if you have a Labels gadget installed. If you don’t see any label, you can always construct the URL yourself.

A  URL follows the format below:

http://YOURBLOGNAME.blogspot.com/search/label/YOURLABEL
For a multiple word label such as "YOUR LABEL", you need to replace the space between words with %20, like so: YOUR%20LABEL. Labels are case sensitive, make sure you enter the correct letter case.
Example:

This is the URL for BloggerSentral’s “SEO and traffic” label. Clicking it will take you to a page showing all posts that fall under that label (opens in new tab/window):


3. Add the tab with the label URL

The method of adding the tab is different depending on the type of widget used for the horizontal navigation bar.
  • To add the tab to the Pages gadget, follow this tutorial: Adding non-page links to Pages/PageList gadget
  • If your tabs uses a LinkList gadget, enter the URL into “New Site URL” text box.
  • For tabs that are made of list items or anchor tags, just add the label URL as a target link like so:
    <a href="PUT LABEL URL HERE" >Link Text</a>
Enjoy!

0 comments: