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:
HTML Code Modification
<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'>
- 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.
<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>
- 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">
<a style="background=#a565cc; color:#333333; font-family: Georgia;" href="http://www.handstampedbyheather.com">HOME</a>
<a style="background=#a565cc; color:#333333; font-family: Georgia;" href="http://heatherporto.stampinup.net/events">UPCOMING EVENTS</a>
<a style="background=#a565cc; color:#333333; font-family: Georgia;" href="http://heatherporto.stampinup.net">SHOP ONLINE</a>
- 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.