How to Customize Links and Tabs on Pages Gadget

This is a quick tutorial on how to customize links and tabs on pages gadget, in case you want to have a tab to link to some other URL instead of your static pages alone (how selfish the current limitation is!). Do note that after this hack, you won't be able to edit your pages gadget directly by clicking on 'Edit' on your Pages Gadget from Page Element. You'd have to code it each time you wanna make changes. So if you have added a new static page, it wont automatically show on your Pages Gadget unless you make the necessary changes.

Make sure you have already added your Pages Gadget before attempting this tutorial.

Update: With the new Blogger interface, you can add external links to your Pages gadget.

Step 1:

View you blog using Firefox (or any other browser that lets you to view the page source) - Right Click - View Page Source

Step 2:

Copy Everything from <ul> to </ul>. Mine looks something like this:

Step 3:

This is where you will edit your code. This is the code that I have copied from page source.

<li class="selected"><a href="http://yoboytestblog3.blogspot.com/">Home</a></li>
<li><a href="http://yoboytestblog3.blogspot.com/p/background-1.html">Background 1</a></li>
<li><a href="http://yoboytestblog3.blogspot.com/p/background-2.html">Background 2</a></li>

If you want additional links to your Pages Gadget, you gotta add more lines to the above code. Say I want my second tab to be linking to my other Blog, and I want the tab to say 'My Other Blog', so my code now looks like this:

<li class="selected"><a href="http://yoboytestblog3.blogspot.com/">Home</a></li>
<li><a href="http://www.southernspeakers.blogspot.com/">My Other Blog</a></li>
<li><a href="http://yoboytestblog3.blogspot.com/p/background-1.html">Background 1</a></li>
<li><a href="http://yoboytestblog3.blogspot.com/p/background-2.html">Background 2</a></li>

Step 4:

If you want to retain the highlight feature that your tab has (the tab which is being clicked will be highlighted), do this step. Otherwise, you can skip this step, but you gotta remove the ' class='selected'' part of your code, so that it would similar to other lines in your code.

Note: (skip this paragraph if you are not adding label query to your Pages Gadget) I am sure many of you want to add label search query as a link in the previous step. I must warn you, if you don't care about the highlight feature, this is not a concern. You can add a label query like http://www.southernspeakers.blogspot.com/search/label/Tutorial normally, but if you want the highlight feature to work, your label must end with .html, so your label will be something line Tutorial.html, and your label query page will look something like http://www.southernspeakers.blogspot.com/search/label/Tutorial.htnml . This is just a way to trick blogger to enable the highlight feature. Check out the following tutorial for a detailed walkthrough:
http://southernspeakers.blogspot.com/2010/10/label-sorted-posts-from-menu-bar.html


This is the code that I have after completing the previous step:

<li class="selected"><a href="http://yoboytestblog3.blogspot.com/">Home</a></li>
<li><a href="http://www.southernspeakers.blogspot.com/">My Other Blog</a></li>
<li><a href="http://yoboytestblog3.blogspot.com/p/background-1.html">Background 1</a></li>
<li><a href="http://yoboytestblog3.blogspot.com/p/background-2.html">Background 2</a></li>

I am going to modifiy this code. Modifying is a must to have the highlight feature available. This is the code that I have after modifying it.

<b:if cond="data:blog.url == &quot;http://yoboytestblog3.blogspot.com/&quot;">
<li class="selected"><a href="http://yoboytestblog3.blogspot.com/">Home</a></li>
<b:else/>
<li><a href="http://yoboytestblog3.blogspot.com/">Home</a></li>
</b:if>

<b:if cond="data:blog.url == &quot;http://www.southernspeakers.blogspot.com/&quot;">
<li class="selected"><a href="http://www.southernspeakers.blogspot.com/">My Other Blog</a></li>
<b:else/>
<li><a href="http://www.southernspeakers.blogspot.com/">My Other Blog</a></li>
</b:if>

<b:if cond="data:blog.url == &quot;http://yoboytestblog3.blogspot.com/p/background-1.html&quot;">
<li class="selected"><a href="http://yoboytestblog3.blogspot.com/p/background-1.html">Background 1</a></li>
<b:else/>
<li><a href="http://yoboytestblog3.blogspot.com/p/background-1.html">Background 1</a></li>
</b:if>

<b:if cond="data:blog.url == &quot;http://yoboytestblog3.blogspot.com/p/background-2.html&quot;">
<li class="selected"><a href="http://yoboytestblog3.blogspot.com/p/background-2.html">Background 2</a></li>
<b:else/>
<li><a href="http://yoboytestblog3.blogspot.com/p/background-2.html">Background 1</a></li>
</b:if>

Easy, don't panic. The following image will show you exactly what I did to our original code:

Step 5:

Now that we have prepared our code, it's time to put it at its place. Please backup your template before doing this. From Dashboard - Design - Edit HTML - Expand Widget Templates - Delete everything between <ul> and </ul>, and place our code there. This is how my portion of the code looks like:

<b:section class="tabs" id="crosscol" maxwidgets="1" showaddelement="yes">
<b:widget id="PageList2" locked="false" title="Pages" type="PageList">
<b:includable id="main">
  <b:if cond="data:title"><h2>
<data:title></data:title></h2>
</b:if>
  <div class="widget-content">
<ul>

<b:if cond="data:blog.url == &quot;http://yoboytestblog3.blogspot.com/&quot;">
<li class="selected"><a href="http://yoboytestblog3.blogspot.com/">Home</a></li>
<b:else/>
<li><a href="http://yoboytestblog3.blogspot.com/">Home</a></li>
</b:if>

<b:if cond="data:blog.url == &quot;http://www.southernspeakers.blogspot.com/&quot;">
<li class="selected"><a href="http://www.southernspeakers.blogspot.com/">My Other Blog</a></li>
<b:else/>
<li><a href="http://www.southernspeakers.blogspot.com/">My Other Blog</a></li>
</b:if>

<b:if cond="data:blog.url == &quot;http://yoboytestblog3.blogspot.com/p/background-1.html&quot;">
<li class="selected"><a href="http://yoboytestblog3.blogspot.com/p/background-1.html">Background 1</a></li>
<b:else/>
<li><a href="http://yoboytestblog3.blogspot.com/p/background-1.html">Background 1</a></li>
</b:if>

<b:if cond="data:blog.url == &quot;http://yoboytestblog3.blogspot.com/p/background-2.html&quot;">
<li class="selected"><a href="http://yoboytestblog3.blogspot.com/p/background-2.html">Background 2</a></li>
<b:else/>
<li><a href="http://yoboytestblog3.blogspot.com/p/background-2.html">Background 1</a></li>
</b:if>       

</ul>
<b:include name="quickedit">
  </b:include></div>
</b:includable>
</b:widget>
</b:section>

Save Template and there you have it. Happy trying. I can think of lots of reasons why you want to edit your Pages Gadget. But to go through all this trouble is not worth it in my opinion. Always opt to use Link List gadget as a substitute for your Pages Gadget. You can edit links easily. The only thing you will be giving up is the 'highlighted tabs' feature that comes built in with Pages Gadget.