How to Add a Top Menu Bar to Your Old Style Blog in Blogger

Add a top menu navigation bar to a Blogger blog, even if the blog interface currently displays in an older Blogger style. Blogger updated the interface which users modify their blogs in 2010, which permits you greater access to the HTML code for the blog's design. Blogger automatically updates this interface when account holders who haven't signed in since the roll out log in to Blogger, at which point you can paste in the HTML code for the top navigation menu.

Instructions

1. Sign into Blogger using your Google account credentials. Click the "Design" button under the name of the blog you want to edit.

2. Click the "Add Gadget" button, then select "Text/HTML." Paste the following code into the blank field:

   <ul>
   <li><a href="page1.html">Navigation Option 1</a></li>
   <li><a href="page2.html">Navigation Option 2</a></li>
   <li><a href="page3.html">Navigation Option 3</a></li>
   <li><a href="page4.html">Navigation Option 4</a></li>
   </ul>

   Replace the sample links and titles with the actual URLs and titles of the pages. Add additional <li></li> elements to add additional links to the navigation menu. Click the "Save" button.

3. Select "Edit HTML." Scroll down to the </b:skin> element and click your mouse on the line before this code. Paste the following code in:

   .basictab{
   padding: 3px 0;
   margin-left: 0;
   font: bold 12px Verdana;
   border-bottom: 1px solid gray;
   list-style-type: none;
   text-align: left;
   }

   .basictab li{
   display: inline;
   margin: 0;
   }

   .basictab li a{
   text-decoration: none;
   padding: 3px 7px;
   margin-right: 3px;
   border: 1px solid gray;
   border-bottom: none;
   background-color: #f6ffd5;
   color: #2d2b2b;
   }

   .basictab li a:visited{
   color: #2d2b2b;
   }

   .basictab li a:hover{
   background-color: #DBFF6C;
   color: black;
   }

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

   .basictab li.selected a{ /*selected tab effect*/
   position: relative;
   top: 1px;
   padding-top: 4px;
   background-color: #DBFF6C;
   color: black;
   }

   Edit the codes for colors, the names and sizes of fonts and any other elements of the menu's style you want to change. Click the "Preview" button to preview how the menu looks on your blog and make changes as necessary. Click "Save Changes" when you are ready to make the changes final.

References

• W3 Schools: CSS Navigation Bar
• All Blog Tools: How to Add a Top Navigation Menu