How to Create Horizontal Tabs Menu in Blogger

You can create a simple horizontal tabs menu in blogger like below:

blogger_nav_tabs

Here the Steps:

Step 1:

(1) Open your blogger account, goto >> Layout >> Edit HTML.

(2) Click Expand Widget Templates.

blogger_nav_tabs_2

(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. ;) )

#nav
{
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> “.
blogger_nav_tabs_3

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

blogger_nav_tabs_4

(4) You can drag and replace above page element near the header.
blogger_nav_tabs_5(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.

Google Buzz




You might also like

How to Create Horizontal Tabs Menu in Blogger – Part 2 Few day ago, I received some comments from my reader regarding my last post on How to Create Horizontal...
How To Apply A Google Adsense Account Before you apply google adsense, you need to know a bit of google adsense.  I wrote a post regarding...
How to create Free Wordpress Blog – Step by Step Tutorials Wordpress, another famous blogging platform beside blogger . You can either obtain a free hosting/domain...
How to Start Blogging with Blogger Today I will discuss about "how to start blogging with google blogger".   Blogger is a free hosting...
Grab This Widget
.

8 comments ↓

#1 LeoCW on 02.23.10 at 2:55 pm

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?

#2 Martin Loh on 02.25.10 at 6:06 pm

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.

#3 LeoCW on 02.25.10 at 10:10 pm

Got it loud and clear! Thanks a lot!

#4 Deb Dunlevy on 04.19.10 at 2:57 am

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?

#5 Martin Loh on 04.20.10 at 2:15 am

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.

#6 YC on 05.11.10 at 9:41 am

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

#7 Martin Loh on 05.11.10 at 1:26 pm

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. :)

#8 sunglasses shop on 06.05.10 at 12:46 am

Good

Leave a Comment