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.


Thanks.



Related Topics


How to display author's name in blogger under post title?


How to hide blog description in blogger?


How to split into two blogger header?