You can create a simple horizontal tabs menu in blogger like below:
Here the Steps:
Step 1:
(1) Open your blogger account, goto >> Layout >> Edit HTML.
(2) Click Expand Widget Templates.
(3) Copy ALL the HTML code into a Notepad. (It is highly recommend to use a Notepad to edit the HTML code.)
Step 2:
(1) Below are the HTML code for Horizontal navigator menu Tabs CSS style : (I will discuss the CSS in detail later. 
)
{
padding:0;
}
#nav li
{
display:inline;
}
#nav li a
{
font-family:Arial;
font-size:12px;
text-decoration: none;
float:left;
padding:10px;
background-color: #333333;
color:#ffffff;
border-bottom:1px;
border-bottom-color:#000000;
border-bottom-style:solid;
}
#nav li a:hover
{
background-color:#9B1C26;
padding-bottom:12px;
border-bottom:2px;
border-bottom-color:#000000;
border-bottom-style:solid;
margin:-1px;
}
(2) Find the HTML Code “ ]]></b:skin> ” .( you can use Ctrl+F in Notepad to find the code)
(3) Copy all the step(1) CSS Code then paste into the Notepad HTML Code before “ ]]></b:skin> “.
(4) Delete all the old HTML code in blogger then replace with the new HTML code (with CSS code).
Step 3:
(1) Goto Blogger >> Layout >> Page Elements.
(2) Click “add a gadget” to select “HTML/JavaScript” page element.
(3) Copy below code into “HTML/JavaScript” page element.
<ul id=”nav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>Sitemap</a></li>
<li><a href=”#”>Help</a></li>
<li><a href=”#”>Contact Us</a></li>
</ul>
(4) You can drag and replace above page element near the header.
(5) You need to change the HTML code “ <a href = “#”> “ to match your navigator destination page. Example: if your Home Page url is “http://(YourBlogName).blogspot.com/home.html”. Your code will be ” <a href = “http://(YourBlogName).blogspot.com/home.html “> ”
(6) Repeat step (5) with other pages.
8 comments ↓
Thanks for the info. Just one question.
Do you know the difference of putting the code below the header code and ]]> code that you recommends here?
Hey Leo…
The code that put before “]>” is CSS style code which is define the style of tabs menu colour. In this case, the tab colour is black as default and change to red when you hover on it. You can change the colour by edit the CSS hexadecimal color code.
The code below header is the tabs menu code.
Hope this answered your question.
Got it loud and clear! Thanks a lot!
This is exactly what I need and the instructions are incredibly clear. I appreciate that since I’ve been looking at a lot that weren’t. Unfortunately it’s not working for me. This created a bulleted list of links, but not horizontal tabs. What am I doing wrong?
Hey Ded..
You saw the bulleted list maybe due to you didn’t copy the CSS code and paste into your blogger html code perfectly.
Hi Martin,
Thanks for the clear instructions. Unfortunately I have the same problem as Deb. I copied the CSS code and pasted in, but i noticed the lines before the beginning of the CSS codes are not the same. Is there anything i need to physically deleted after pasting the codes?
Much appreciated
Hi, YC…
I post a solution and you can refer the solution at http://martinloh.com/blogger-tips/how-to-create-horizontal-tabs-menu-in-blogger-part-2/.
By the way, you got a nice blog.
Good
Leave a Comment