Let your readers know where they are on your blog. How? By highlighting the tab of the page they are currently viewing. See the demo on my widget showcase blog.

We can detect the current page by using conditional if tag in the navigation bar HTML code. Normally we would have to use one set of conditional if tags for each link/tab.

But if your navigation tabs is made of a LinkList gadget, you can reduce the tags to just one set. Here’s how:

(Note: If you use a PageList gadget as a navigation bar, you can skip step 2. The gadget already has a built-in current page detection code).

1. Finding the navigation bar LinkList code

Find the navigation bar’s widget Id (hint: the Id starts with “LinkList”, followed by a number). If you don’t know how to find the Id, learn how by reading How to find Blogger widget Id. For the sake of this tutorial we will address the Id as YourWidgetId.

3. Highlighting the tab

If you are using a Designer Template you probably won’t need this step since the existing code for tab highlighting is applied to all below-the-header tabs regardless if it’s a LinkList or PageList. Go test the tabs first, if they don’t highlight, proceed with the step below.

To style the current page tab, you simply add a styling rule in CSS, like is:

Brand new blogger here. Not sure if this post would solve my problem - - trying to make my page link in the right side bar change color to denote the current page, NOT bold the current page (as it does currently). Would there be additional steps above to the process above to make this happen? Here's my (very sparse!) blog: http://thisnorthwoodsnest.blogspot.com/

@WillIt seems this hack no longer works. The code saves but Blogger disregards it.Fortunately right now you can use Pages gadget to achieve similar goal. (At the time I wrote this tutorial in 2010, Blogger didn't allow non-page links in Pages gadget. Now they do). I suggest you transfer the links to a Pages gadget. The 'selected' class will be added automatically to current page by default.

Will,
May 22, 2012 at 10:54 AM

I don't think it as simple as using the Pages gadget. The Pages gadget highlights the current page if it's a static page. But if it's a link page, it doesn't highlight the current page. Being able to link in the Pages gadget is a new feature so I suppose we'll have to wait for the templates to catch up.

Thanks for you help.

mardyyn,
November 14, 2012 at 1:40 AM

@Will @GreenlavaI got exactly the same problem. if I use the Pages-Gadget and add Weblinks to it, these tabs are not highlighted when active.