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:

   <b:widget id='YourWidgetId' locked='false' title='' type='LinkList'>
   <b:includable id='main'>
   <b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content'>
      <ul>
        <b:loop values='data:links' var='link'>
          <li><a expr:href='data:link.target'><data:link.name/></a></li>
        </b:loop>
      </ul>

2. Modifying the LinkList code

1. Replace code line 7 with this code:

   <b:if cond='data:blog.url==data:link.target'>
   <li class='selected'><a expr:href='data:link.target'><data:link.name/></a></li>
   <b:else/>
   <li><a expr:href='data:link.target'><data:link.name/></a></li>
   </b:if>

2. The final code will look like this:

   <b:widget id='YourWidgetId' locked='false' title='' type='LinkList'>
   <b:includable id='main'>
   <b:if cond='data:title'><h2><data:title/></h2></b:if>
    <div class='widget-content'>
      <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:blog.url==data:link.target'>
          <li class='selected'><a expr:href='data:link.target'><data:link.name/></a></li>
          <b:else/>
          <li><a expr:href='data:link.target'><data:link.name/></a></li>
          </b:if>
        </b:loop>
      </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: 

#YourWidgetId .selected {
background-color: #fff;
border-bottom: none;
/* add more styling declarations here */ 
}

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

• Sample CSS code (full code)

  This is the CSS code I use to style the navigation bar in the above picture.

  /* LinkList/PageList navigation tabs styling
  ----------------------------------------------- */
  #YourWidgetId {
  margin: 0;
  padding: 0 10px;
  text-align: left;
  height:30px;
  width:640px; /* change to match your header's */
  position: relative;
  background: #336699;
  border-bottom:1px solid #ee4449;
  _border-bottom:none;
  _overflow:hidden;
  }
  #YourWidgetId ul {
  margin: 0;
  padding: 0;
  list-style-type:none;
  }
  #YourWidgetId li {
  display: inline;
  float:none;
  margin: 0;
  padding: 0;
  }
  #YourWidgetId a {
  line-height:31px;
  padding: 6px 6px;
  text-decoration: none;
  font-size:105%;
  color: #eee;
  background-color: #336699;
  border-right: 1px solid #5588bb;
  }
  #YourWidgetId a:hover {
  color: #ddd;
  background: #5588bb;
  }
  *>#YourWidgetId .selected a {
  border-top:1px solid #ee4449;
  border-right:1px solid #ee4449;
  border-left:1px solid #ee4449;
  border-bottom:1px solid #fff;
  padding-top:10px;
  }
  #YourWidgetId .selected a {
  background-color:white;
  color:#333;
  font-weight:normal;
  }

Enjoy!