Highlighting Current Page Tab In Navigation Bar

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

1. 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.
2. Go to Dashboard > Design > Edit HTML.
3. Back up your template.
4. Tick the  Expand Widget Templates check box on top right of the HTML window.
5. Look for the navigation bar LinkList code by searching for the widget id you identified in step 1 (Use Ctrl+F). The code should look something like this:

   1	<b:widget id='YourWidgetId' locked='false' title=''type='LinkList'>

   2	<b:includable id='main'>

   3	<b:if cond='data:title'><h2><data:title/></h2></b:if>

   4	<div class='widget-content'>

   5

   <ul>

   6	<b:loop values='data:links' var='link'>

   7	<li><a expr:href='data:link.target'><data:link.name/></a></li>

   8

   </b:loop>

   9

   </ul>

2. Modifying the LinkList code

1. Replace code line 7 with this code:
   view sourceprint?

   1	<b:if cond='data:blog.url==data:link.target'>

   2	<li class='selected'><a expr:href='data:link.target'><data:link.name/></a></li>

   3

   <b:else/>

   4	<li><a expr:href='data:link.target'><data:link.name/></a></li>

   5

   </b:if>

2. The final code will look like this:

   01	<b:widget id='YourWidgetId' locked='false' title=''type='LinkList'>

   02	<b:includable id='main'>

   03	<b:if cond='data:title'><h2><data:title/></h2></b:if>

   04	<div class='widget-content'>

   05

   <ul>

   06	<b:loop values='data:links' var='link'>

   07	<b:if cond='data:blog.url==data:link.target'>

   08	<li class='selected'><aexpr:href='data:link.target'><data:link.name/></a></li>

   09

   <b:else/>

   10	<li><a expr:href='data:link.target'><data:link.name/></a></li>

   11

   </b:if>

   12

   </b:loop>

   13

   </ul>

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: 

view sourceprint?

1	#YourWidgetId .selected {

2	background-color: #fff;

3	border-bottom: none;

4	/* add more styling declarations here */

5

}

And place it before ]]></b:skin> line in your template code. ReplaceYourWidgetId with your actual LinkList or PageList widget Id.

• Sample CSS code (full code)