Tuesday, 13 September 2011

How to add links and urls to the Page List Gadget in Blogger




The simplest way to add navigation tabs to your blog is through the Page List gadget. However, as you have probably noticed the Page List gadget can be quite restrictive in only allowing your static pages to be displayed.

The following it a simple manipulation, that will allow you to display non-static pages in your blogger blog's navigation menu, the Page List.

Instructions:

1. Dashboard > Design > Edit Html

2. Check the Expand Widget Template box, located at the top right of the editing window.

3. Now search for the following line within your template:
<b:widget id='PageList1' locked='false' title='Pages'


4. You should now have the following located below:


<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>
Your Code here
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>


5. You will put the code for the links that you wish to add below  </b:loop> 
Each of your links should be as follows, placing one line of code for each link below the next:

<li><a href="YourLink/URL">TitleofLink</a></li>

Your Link/Url will be the destination, and the Title of Link will be the name that shows up in your Page List navigation bar.

6. Now Preview, if your not happy with the styling just click clear edits, otherwise click save and your done.

7. Additional tip, to make your link open in a new browser tab using the following:
<li><a href="YourLink/URL"target="_blank">TitleofLinkt</a></li>

Blog Archive