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:
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:
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 this following tutorial as I mentioned in there how to achieve it.
Oh, and don't forget to back up your template before attempting anything. Have fun trying.
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 this following tutorial as I mentioned in there how to achieve it.
Oh, and don't forget to back up your template before attempting anything. Have fun trying.
Category Article Tutorial
