Create Horizontal Tabs Menu

To create Horizontal Tabs Menu is not as simple as it's look, it's complicated. You have to design button, you have to create CSS and HTML code. Now I will show you how to create "Horizontal tabs menu" in blogger.

The first thing you have to di is create an image like this:









whiteleft.gif and whiteright.gif

1. Login to Blogger, chose "Lay out --> Template --> Edit HTML"
2. Don't forget to backup your template first.
3. Check the "Expand Widget Templates" checkbox.
4. Try to find this code

, if you found it then put the code below above it

/*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("http://hariesdesign.googlepages.com/whiteleft.gif") no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; } #tabshori a span { float:left; display:block; background:url("http://hariesdesign.googlepages.com/whiteright.gif") 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; } }

you can change the bold text with other image, for example, if you want to chose my red menu image the code will be like this:

background:url("http://x3x.890m.com/menu/redleft.gif") no-repeat left top; background:url("http://x3x.890m.com/menu/redright.gif") no-repeat right top;

5. Then copy the code below

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

change http://blogger-freetemplates.blogspot.com with your own link, and change the bold text with your own text.

6. Next step is to put the tabs menu into your blog, this more difficult because we have different templates. There are some methods to do this, Here is the methods:
Find the below code :

<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>

Change 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 setting, the go to "Page Elements" and click "Add page Element " on the header area, chose "HTML/JavaScript" then put the number five code above into "content" box, then click "save" and preview your new blog