Add a Horizontal Navigation Menu under the Header

This tutorial shows how to create a Horizontal Navigation Menu for your Blogger website. The horizontal menu is shown as below:

Step 1: Go to Layout >> Edit HTML window

Copy the following codes before the “</b:skin>” code or “]]></b:skin>“.

/* Header Horizontal Navigation Menu CSS Start Here */

.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray; /* set the bottom border to zero if not like */
list-style-type: none;
text-align: left; /*position of menu - left, center, or right*/
}

.basictab li{
display: inline; /* arrange in horizontal */
margin: 0;
}

.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #99b2db; /* light blue */
color: #f3f3fb; /* this is font color */
}

.basictab li a:visited{
color: #f3f3fb; /* this is font color */
}

.basictab li a:hover{
background-color: #576fb5; /* dark blue */
color: black;
}

.basictab li a:active{
color: black;
}

.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #576fb5; /* also dark blue */
color: black;

/* Header Horizontal Navigation Menu CSS END Here */

Please see the following two diagrams. It shows where is the “</b:skin>” code:

Step 2. Go to Layout >> Page Elements window

Since we wish to add the horizontal navigation menu directly under the Header, click on the “Add a Gadget” link as shown in below picture:

The Add a Gadget window pop up. Select the “HTML/JavaScript Gadget” as shown:

Copy the following codes to the Content field of “Configure HTML/JavaScript” window as shown:

<ul class="basictab">
<li class="selected"><a href="http://YourBlogURL.com/">Home</a></li>
<li><a href="http://YourBlogURL.com/about-our-authors.html">About Our Authors</a></li>
<li><a href="http://YourBlogURL.com/my-websites.html">My Favorite Websites</a></li>
</ul>

Click on the SAVE button to save the changes.

Result of Adding Horizontal Navigation Menu:

Click on the View Blog link. The horizontal navigation menu should appear under the Header Section:

This tutorial shows how to add a Horizontal Navigation Menu under the Header.