Blogger: Adding a Simple Navigation Bar/Links Under Your Banner

This was an article written in my December 2008 Newsletter.  So...if you haven't done so already, sign up for my Blogs By Heather newsletter.  Subscribers always get articles and tips that do not appear on my blog until much, much later!

Anyway, I recently received an email about how to do this "adding simple navigation" under an existing blog banner (Blogger), so I wanted to share it with all of you!

Creating a Navigation Bar
 
It's a little tricky but can be done. Look at Jackie's blog for a sample:
 
http://klompenstampers.blogspot.com/
 
 
HTML Code Modification

• Login to Blogger.
• From the Dashboard, click on Layout.
• Click or go to Page Elements to see if you already have the "Add a Gadget" underneath your banner/header.
• If not, then you have to modify the HTML to enable it.
• Go to the Edit HTML tab.
• Scroll thru the HTML code, towards the bottom, looking for the HEADER WRAPPER code:
  
  <div id='header-wrapper'>
  <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
  </b:section>
  </div>
   
• Where you should enter a 2 or greater for maxwidgets....I used 2.
• Then change 'no' to 'yes' for showaddelement.
• Then click SAVE TEMPLATE button.
• Now go back to Page Elements and you should now see the Add a Gadget under the header.
• Add a Gadget
• From the page elements view, now click on Add a Gadget under the banner/header area.
• Choose HTML/JavaScript element.
• Then you could write something like this....

<Table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

• What this is is creating a table....it has one row and 3 columns at present using the code above.
   
  Now you have to add the text links.
   
  For example:
   
  <Table>
  <tr>
  <td><a href="http://www.handstampedbyheather.com" target=_blank>HOME</a></td>
  <td><a href="http://heatherporto.stampinup.net/events" target=_blank>EVENTS</a></td>
  <td><a href="http://heatherporto.stampinup.net/promotions" target=_blank>PROMOTIONS</a></td>
  </tr>
  </table>
  
  
• Another example with further table formatting - using "cell padding", "bgcolor" and "background" attributes.
  
  If you want a color to appear behind all elements of the navigational bar area, then use the "bgcolor" attribe of the TABLE tag. If you want the color just to appear with each word so it looks more like a button, then use the "background" property of the TD tag.  Use one or the other.
  
  In this example, the color purple (#a565cc) is being used as the background color and the font color gray (#333333) is being used for the text links.
  
  <table cellpadding=20 bgcolor="#a565cc">
  <tr>
  <td>
  <a style="background=#a565cc; color:#333333; font-family: Georgia;" href="http://www.handstampedbyheather.com">HOME</a>
  </td>
  <td>
  <a style="background=#a565cc; color:#333333; font-family: Georgia;" href="http://heatherporto.stampinup.net/events">UPCOMING EVENTS</a>
  </td>
  <td>
  <a style="background=#a565cc; color:#333333; font-family: Georgia;" href="http://heatherporto.stampinup.net">SHOP ONLINE</a>
  </td>
  </TR>
  </TABLE>
  
  
  
• Then click SAVE.
• You're done.

Graphical Navigational Bar

If you want to do some type of graphical navigational bar then the process is more complex. First you need to modify the banner in Photoshop or other graphical program to include the buttons (basic or fancy).  Then, you'll need Photoshop / Image Ready or some other graphical program to do what is called "slicing" and then create Rollovers, save the outputed images and HTML, store the images to an online storage area like http://sites.google.com since Blogger doesn't have a file manager, edit the the outputed HTML code to reference the online storage path (instead of that of your personal computer), modify the HTML code, then copy to your Gadget in Blogger. Lastly, you would go to Layout, Edit HTML, and add "onload = "preloadImages();" to the BODY tag.  So, this is why I charge a $20 fee to do all of this for customers that go this route instead.

Happy blogging!

Comments

[Wrena]

Hello thanks for all your help I am working on a navigation bar can the links go beside each other and if so what do I add, or change in my code

[Heather Wright-Porto]

Hi Bekah!
What you could do is upload your pictures to Photobucket. Go to www.photobucket.com its free. create a new ablum and upload all your pictures there. You will then see a place to get the HTML/URL for that album. You would then copy and paste that URL into your navigational bar. Then when a visitor clicks on it, it will go to your album.

If you are using blogger, you can also do this with Picasa Web Albums... www.picasaweb.google.com. Login using your blogger acct information. Create a new album, upload pics..then on the right you can see "link to this album". Get the URL there and again use that URL in your navigational bar.

Email me if you need more help.
Heather :D

[Heather Wright-Porto]

Renee, if you are still haveing a problem let me know. But in the header section you can do "Drag and Drop" just like you do in your sidebar.

if it is still not allowing it, maybe you forgot to change one of the properties....
lock="true" you must change to lock="false". That may be the problem if it appears locked in place.

email me if you continue to have problems.
Heather :D

[Jill Hilliard]

Thanks Heather. I sat down to FINALLY add this to my blog and your instructions are FAB. I appreciate all of your help!

[Renee]

I had same problem , what I did was drag it above blog post, then drug under header.
My problem is It ends up IN my header banner :( any suggestions?

[Renee]

Mine is above Blog Header and I cant get it below it :( HELP lol

[Bekah]

Hi I have a question...how do I get the text links? Say I want to have a navigational bar link that says Pictures, how do I get the text link for that? Do I upload all the pictures I would like in a post, then publish it, then get the url for that, and then delete the post? Help, please :) Thanks, if you have any suggestions, I would LOVE to hear them. :)

Bekah

[Keryn]

Thanks Heather this is something I have been trying to add to my blog for a long time. I've had first time success thanks to your excellent instructions.

[Heather Wright-Porto]

Hi Sharon!
If you go into Layout. Then you can click on the main banner gadget and "drag and drop" it above the new HTML/JavaScript gadget. Then click SAVE to save the new layout changes - the ordering of the gadgets. Then view your blog and it should be OK. Let me know.
Heather :D

[Sharon]

Hi Heather,
Thank you so much for all you do. I tried the code modification above and my "Add a Gadget" ended up above my Header/Banner!! Any help would be greatly appreciated.