Creating navigation or menu tabs in Blogger

A typical navigation bar/tabs

A navigation or menu bar is a bar made up of tabs. “Behind” those tabs are links -to internal pages, other web sites etc. Making navigation tabs is not that difficult. They are basically links with some styling added for visual appeal. While links are arranged vertically, navigation tabs are usually arranged horizontally. (If you come here looking for dropdown menu, then read Installing a multi level CSS dropdown menu).

In this tutorial we will install the bar just below the header, a typical place for navigation bar. The bar will be added as a gadget via Page Elements page. The advantage of using a gadget is that if you want to remove it later on, it can be done easily without editing the HTML.

But in order to do that, the template must have a page element (to contain the gadget) at that particular location –below the header. In Minima template (the template I’m using to test this project) as with most other templates, the is no such element. What do we do then? We create it.

 

No element to add in the widget/gadget

 

Step 1. Adding a Page Element

Adding a page element is done in the HTML.

1. Go to Dashboard>Layout>Edit HTML.
2. Back up your template.
3. Look for the following lines (or something similar) in your HTML codes:

   <div id='header-wrapper'>
   <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='true' title=Your Blog Title(Header)' type='Header'/>
   </b:section>
   </div>

4. Right under it, paste this code:

   <!--Navigation page element starts -->
   <div id='navibar-wrapper'> 
   <b:section class='navibar' id='navibar' showaddelement='yes'/> 
   </div> 
   <div style='clear: both;'/>
   <!--Navigation page element ends -->

   

Step 2. Adding in the tabs

1. Go to Layout>Page Elements sub tab.
2. Click Add-A-Gadget link below the header.
3. Scroll down the Add-A-Gadget window and select HTML/Javascript.
4. Leave the title box empty.
5. Copy and paste the HTML code below.

   <!-- Navigation tabs start -->
   <a href="YourLink1" class="navitabs" title="TooltipText1">ButtonText1</a>
   <a href="YourLink2" class="navitabs" title="TooltipText2">ButtonText2</a>
   <a href="YourLink3" class="navitabs" title="TooltipText3">ButtonText3</a>
   <a href="YourLink1" class="navitabs" title="TooltipText4">ButtonText4</a>
   <a href="YourLink5" class="navitabs" title="TooltipText5">ButtonText5</a>
   <!-- Navigation tabs end -->

6. Replace YourLink with the url of each link, TooltipText with the text you want to appear when you hover the button and ButtonText with the text you want show on each button.
7. Click Save.

   A working navigation tabs, before styling

 

Step 3. Styling the tabs.

Copy the code below and paste it into the CSS section of your template. (CSS stands for Cascading Style Sheet. It is a segment in your template code that is responsible for styling your page. It starts from <b:skin><![CDATA[ and ends with ]]></b:skin>).

/* Navigation tabs start */
a.navitabs, a.navitabs:link, a.navitabs:visited {display:block; width:150px; height:25px; background:wheat; border:1px solid black; margin-top:2px; text-align:center; text-decoration:none; font-family:verdana, arial, sans-serif; font-size:12px; color:black; line-height:25px; overflow:hidden; float:left;}
a.navitabs:hover {color:white; background:olive;}
a.navitabs:active {color:white; background:indianred;}
/* Navigation tabs end */ 

The finished product

 

Step 4. Customizing

• Change the colors, height etc. to suit your taste.
• You can add or reduce the number of tabs. To add, go to Step 2 and add in the links.
• Change the width of the tabs in Step 3 until they align nicely with your blog header.
• You can move the bar to the top of the header if you want,
  1. In Step 1 no.3, inside the header widget, change locked='true' to locked='false'.
  2. Drag & drop the bar element in Page Elements page.

That’s all and good luck.

 

Before you leave:

• Do you find this article useful? Share it via Tweet This or Add This buttons below.
• Any suggestion, question or comment? Please post it in the comments below.

Technorati Tags: navigation tab