How to Add a Non-Static Page Tabs To Pages/ Page-List Gadget

This method is very easy so don’t be afraid to try. With the new Blogger user interface, you can add whichever web links (external links, label URLs, individual post links etc.) to the pages gadget. Here’s how it works:

1. Switch to the new interface by clicking the “Try the updated Blogger interface” link at the top of the screen. Most people find the new user interface very difficult to move around as it is design for experience bloggers. You can always go back to the old User Interface after editing so don’t be afraid.
2. In the new User Interface, go to Dashboard and click the drop-down menu next to the blog you want to add the link to.
3. Select Pages.
4. And then click New Page drop-down 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.

Check out the original tutorial (for guidance) 
Once of the easiest way to add navigation tabs in Blogger blog is using a Pages gadget. on the other hand, as the name implies, there is a shortcoming -the tabs only link to static pages. i.e. not updatable.
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 Code below to add tabs that link to any URLs. You can add tabs linking to label pages, individual post pages, website and so on.

See the practical for reference:
1. Now 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:

01	<b:widget id='PageList1' locked='false' title='Pages'type='PageList'>

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:link.isCurrentPage'>

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

09

<b:else/>

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

11

</b:if>

12

</b:loop>

13	INSERT THE CODE FOR THE LINKS HERE

14

</ul>

15	<b:include name='quickedit'/>

16

</div>

17	</b:includable>

18	</b:widget>

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

To Copy Code, Click <> Icon on the right

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

1. where YourLink is an URL and YourLinkText is the text you would like to appear on the menu or tab.
2. Preview before saving.

Posted in: Blogger Tips