Customize Tabs on Pages Gadget

This one is a real quicky. In this tutorial, you will learn how to customize the tabs and its links on the Pages gadgets.

Step 1:

View your blog. Use Firefox (or any other browser that allows you to view it's source) - Right Click - View Page Source - copy everything from <ul> to </ul>

Mine looks something like this:

<li><a href='http://yoboytestblog.blogspot.com/'>Home</a></li>
<li><a href='http://yoboytestblog.blogspot.com/search/label/homemade.html'>Homemade Posts</a></li>
<li><a href='http://yoboytestblog.blogspot.com/search/label/imported.html'>Other Posts</a></li>
<li><a href='http://yoboytestblog.blogspot.com/p/link.html'>Link</a></li>
<li><a href='http://yoboytestblog.blogspot.com/p/contact.html'>Contact</a></li>
<li><a href='http://yoboytestblog.blogspot.com/p/archive.html'>Archive</a></li>
<li><a href='http://yoboytestblog.blogspot.com/p/photos.html'>Photos</a></li>

Step 2:

Customize the links however you want. URL goes after href, and  the name of the tab is typed before </a>. And if you want your customizes tab to be your second tab, make it be your second line. So my customised tab looks something like this:

<li><a href='http://yoboytestblog.blogspot.com/'>Home</a></li>
<li><a href='http://yoboytestblog.blogspot.com/search/label/homemade.html'>Homemade Posts</a></li>
<li><a href='http://yoboytestblog.blogspot.com/search/label/imported.html'>Other Posts</a></li>
<li><a href='http://yoboytestblog.blogspot.com/p/link.html'>Link</a></li>
<li><a href='http://yoboytestblog.blogspot.com/p/contact.html'>Contact</a></li>
<li><a href='http://yoboytestblog.blogspot.com/p/archive.html'>Archive</a></li>
<li><a href='http://yoboytestblog.blogspot.com/p/photos.html'>Photos</a></li>

Step 3:

Copy this code, go to Dashboard - Design - Edit HTML - Check Expand Widget Templates - and delete everything before <ul> to </ul> and replace with the above code - Save template

That's it. Note that I have omitted a little effect of highlighted clicked tab for simplicity purposes. If you want this effect to be available, refer to the following tutorial as I mentioned in there how to achieve it.

http://southernspeakers.blogspot.com/2010/10/blogger-tips-setting-up-homepage_6156.html

Oh, and don't forget to back up your template before attempting anything. Have fun trying.