Few day ago, I received some comments from my reader regarding my last post on How to Create Horizontal Tabs Menu in Blogger. They use my method to create the horizontal tab but at the end,  they created a bulleted list of links.  So I decide to log in my blogger account and take a look for this issue.

After testing on several of blogger template, the original code create vertical tab instead of horizontal tab.

Therefore, I check the code again and what I found was the CSS code was missing after change the template.  As you can see as above picture.  Seem like this is Blogger’s problem and I have not idea why the CSS code is missing every time I change a new template.  Without the CSS code, there will be no horizontal tab.

How do we create the horizontal tab? Basically, we need 2 different code i.e. widget Code and CSS code. The widget code create a list of links and CSS code change the style of the links into horizontal tab.

Therefore, without the CSS code, your links will be vertical tab as default.

Widget code: Create the list of links

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

The Solution:

I copy all the Missing CSS code (as below) again and then paste into the template HTML Code (you need to expand widget templates to see the whole template HTML code) before ” ]]></b:skin>”.

CSS Code: change the links into horizontal tab

#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;
}

After I added the missing CSS code, I create the horizontal tab at my template.

I hope this solution can resolve all my reader’s problem.

IF above solution still not solve your problem then drop me a comment and I will look into your blogger’s code.

Related posts:

1. How to Create Horizontal Tabs Menu in Blogger
2. 31 Ways to Make a Girl Smile :)
3. How to Start Blogging with Blogger
4. Why You Should Updated Your Firefox to Firefox 3.6
5. How To Apply A Google Adsense Account

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

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

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

Related posts:

1. How to Create Horizontal Tabs Menu in Blogger – Part 2
2. 31 Ways to Make a Girl Smile :)
3. How To Apply A Google Adsense Account
4. How to Start Blogging with Blogger
5. How to create Free Wordpress Blog – Step by Step Tutorials

Today I will discuss about “how to start blogging with google blogger”.   Blogger is a free hosting and domain for blog.  If you are newbie and want to learn how to blog then blogger is the easy and free for you to start.

When I start my “blogging career”, i choose blogger as my first blogging platform – reason is FREE.  And it is easily to use and blogger own by google.

My first blog is about Island, you can check here. 

Here is the short video to start setup a free account in blogger.

Related posts:

1. How To Apply A Google Adsense Account
2. How to create Free Wordpress Blog – Step by Step Tutorials
3. How Much Does a Pro Blogger Make every Month?
4. How to Create Horizontal Tabs Menu in Blogger – Part 2
5. Who is John Chow?