A Tab Menu For Your Very Own

A few weeks ago I was asked by a web designer to help get a tab menu on a blog that was to be integrated with a web site. I have never worked with setting up a tabbed menu before, so I set off in quest of an answer. Happily I was able to piece together bits of code from here and there. This is the result:




I was able to use the instructions from Blogger and Free Templates but, I'll attempt to simplify their instructions here.

This is how you can get a tabbed menu on your blog. First, backup your template. Now open your Dashboard | Layout | Edit HTML. Locate the CSS style sheet between the <b:skin><![CDATA[/* and ]]></b:skin> tags and add the following code.

Note: It doesn't make any difference exactly where it goes, but a good place would be after the
/* Header
----------------------------------------------- */ section.

Here is the code:

/*credits : http://blogger-freetemplates.blogspot.com , HariesDesign.com*/
#tabshori {
float:left;
width:100%;
font-size:13px;
border-bottom:1px solid #2763A5;
line-height:normal;
}
#tabshori ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabshori li {
display:inline;
margin:0;
padding:0;
}
#tabshori a {
float:left;
background:url("LEFT IMAGE") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabshori a span {
float:left;
display:block;
background:url("RIGHT IMAGE") no-repeat right top;
padding:5px 14px 4px 4px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabshori a span {float:none;}
/* End IE5-Mac hack */
#tabshori a:hover {
background-position:0% -42px;
}
#tabshori a:hover span {
background-position:100% -42px;
}

Save your template. Scroll down your template past the CSS style sheet and find:

<b:section class='header' id='header'
maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true'
title='your blog title (Header)' type='Header'/>
</b:section>

Replace with this code:

<b:section class='header' id='header'
maxwidgets='2' showaddelement='yes'>
<b:widget id='Header1' locked='false'
title='your blog title (Header)' type='Header'/>
</b:section>

Save your template. Open the Page Elements tab in your dashboard. Notice you now have the option to add a page element to your header section. Which also means you have the option to drag and drop the element where you would like your tabs to display...above or below the header. Click on Add a Page Element and put this code in the window, replacing my links with yours:

<div id="tabshori">
<ul>
<!-- Change the links with your own links -->
<li><a href="http://www.bloggeruniversity.blogspot.com/"><span>Home</span>
</a></li>
<li><a href="http://www.bloggeruniversity.blogspot.com/"><span>3 Column</span></a></li>
<li><a href="http://www.bloggeruniversity.blogspot.com/"><span>2 Column </span></a></li>
<li><a href="http://www.bloggeruniversity.blogspot.com/"><span>Blogging Tips</span></a></li>
<li><a href="http://www.bloggeruniversity.blogspot.com/"><span>Seo Tips</span></a></li>
</ul>
</div>

That is it for the code end. Now all you need is the tab graphics. A little search revealed several, but my favorites came from explodingboy. Click to see them:

1. Tab Menu Set 1
   
2. Tab Menu Set 2

You can download them here: Tab Set 1 and Tab Set 2. You will need to upload your images to a web host such as Ripway and insert the image in the above code where it says IMAGE LEFT and IMAGE RIGHT. You will notice that each image in the zip file has a left and right.

Enjoy your new tab menu! I have used them for ages in Buttermilk Clouds, but can't take credit for adding them. They happily came with the template. But, you can take a peek and see some uses for the tabs. Buttermilk Clouds is a classic template, so the code is different for that style template. If there is enough interest, I may attempt a post on adding a tab menu to the Classic Blogger. Let me know.