How to add a horizontal navigation bar in blogger

How to add a horizontal navigation bar in blogger

This is the easiest way to add a horizontal navigation bar in your blogger header.

Note: Back up your template's HTML code first.

Step 1. Go to blogger DASHBOARD -> TEMPLATE -> EDIT HTML

a. Then you'll find an instruction which says, "Directly editing HTML may affect....." Press "PROCEED."

b. Tick on "EXPAND WIDGET TEMPLATE."

STEP 2. Press CTRL F then copy and paste the following at the "get prompt" located at the upper right corner of the screen (don't include the bullet mark):

• ]]></b:skin>

Paste the CSS code below before "]]></b:skin>".

 #nav {
      width: 100%;
      float: left;
      margin: 0 0 3em 0;
      padding: 0;
      list-style: none;
      background-color: #f2f2f2;
      border-bottom: 1px solid #ccc; 
      border-top: 1px solid #ccc; }
   #nav li {
      float: left; }
   #nav li a {
      display: block;
      padding: 8px 15px;
      text-decoration: none;
      font-weight: bold;
      color: #069;
      border-right: 1px solid #ccc; }
   #nav li a:hover {
      color: #c00;
      background-color: #fff; }

STEP 3. Press CTRL F again and paste <b:section class='header'  and you'll find the following code:

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

Change the value of maxwidgets to 3 or any value more than one, for example: maxwidgets='3' 

Change also the value of showaddelement to 'yes' or: showaddelement='yes'; and the value of locked to 'false' or locked='false'. Thus, your new code should look like this:

<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'> 
<b:widget id='Header1' locked='yes' title='Your Blog (Header)' type='Header'/> 
</b:section> 

Press SAVE TEMPLATE. You're done.

 Go to LAYOUT and look for "Add a Gadget" at the header area.

Then, choose the HTML/JavaScript gadget.

STEP 4. Paste the following code.

    ul id="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Blah blah</a></li>
   </ul>

IMPORTANT NOTE: Replace "#" with your URL. For example:

<li><a href="http://www.bythisword.com">Home</a></li>

Then press Save arrangement.