Creating a Blogger Tab with External Link

As a small business owner with a limited budget I often have more time than money. The range of free services offered by companies like Google really help my bottom line. Regardless, I often burn the candle at both ends to find the answers and then to teach myself how to do it properly.

As a part of my blog series I'll try to share the things I've learned so others can have it a little easier.

Here's the first installment.


After searching for three months on how to create a pages tab in blogger that links to an external site instead of a blogger generated page, I finally found a hack.

I'm very excited because instead of my galleries tab taking you to some crappy page that lists links to my actual galleries, which are hosted on a site different from Blogger, now the pages tab actually takes you directly to my galleries. This makes for a much more professional looking site.

So here's the blogger pages template hack (and the site I got it from) - 

1. Be sure to save your original blogger template just in case something goes wrong. I even went so far as to copy and paste the HTML from my original pages onto Text Edit pages just in case.

2. Go to Blogger dashboard > Design > Edit HTML. DO NOT click on Expand Widget Templates

3. Use CMD + F and look for:<b:widget id='PageList

You'll find:

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


4. Replace the above code with following code:



<b:widget id='LinkList786' locked='false' title='Menu' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<ul>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<li class='selected'>
<a expr:href='data:blog.homepageUrl'>Home</a>
</li>
<b:else/>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
</b:if>
<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>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Save the template. It will say your template does not include Page List and gives you the option to keep the Page List.  Keep it for now.

5. Go to Design> Page Elements and add your links to your new "Menu" gadget. I copied and pasted the links to the blogger pages I wanted to keep and added the new link code for my galleries. (If you don't see your new Menu gadget something went wrong. You can check the html code here.)

6. Finally, click "edit" on the Pages widget and delete. You now have a new set of tabs!