Adding non-static page tabs to pages/PageList gadget

Update Sep. 2011: Blogger now has the ability to add web links to pages gadget, as such the original hack is no longer necessary.

With the new Blogger UI (user interface), you can add any web links (external links, label URLs, individual post links etc.) to the pages gadget. Here’s how:

1. Switch to the new interface by clicking the “Try the updated Blogger interface” link at the top of the screen (you can always return to old interface at any time).
2. Go to Dashboard and click the grey dropdown menu next to the blog you want to add the link to.
3. Select Pages.
4. Click New Page dropdown and select Web Address.
5. Enter the tab/page title and the URL in the respective text field.
6. Save by clicking Save Arrangement button.

Below is the original tutorial (for reference) 

An easy way to add navigation tabs in Blogger is using a Pages gadget. However, as the name implies, there is a shortcoming -the tabs only link to static pages.

Does that mean you should forget about adding tabs linking pages other than static pages? No, definitely not….because there is always a workaround.

Use the hack below to add tabs that link to any URLs. You can add tabs linking to label pages,  individual post pages, website or whatever.

Here’s how:

1. Go to Dashboard > Design > Edit HTML.
2. Tick the Expand Widget Templates check box on top right of the HTML window.
3. Look for Pages gadget code, like this:

   <b:widget id='PageList1' locked='false' title='Pages' type='PageList'> 
   <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:link.isCurrentPage'> 
             <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li> 
           <b:else/> 
             <li><a expr:href='data:link.href'><data:link.title/></a></li> 
           </b:if> 
         </b:loop> 
        INSERT THE CODE FOR THE LINKS HERE 
       </ul> 
       <b:include name='quickedit'/> 
     </div> 
   </b:includable> 
   </b:widget>

4. Put the code for the  additional links right after </b:loop> as indicated in line 13.
   Each link shall be in this format:

   <li><a href="YourLink">YourLinkText</a></li>

   
   where YourLink is an URL and YourLinkText is the text you would like to appear on the menu or tab.
5. Preview before saving.
6. Enjoy!