blogger hack: adding menu navigation at top

After I finished the redesign on my blogstore, I got to thinking how cool it would be to have navigation on the top of a blogger blog. (My blog store is a WordPress blog). So I crawled around the web, trying a few different methods of getting those lovely links up there that you now see right below my header graphic (aren't they COOL?). My first 5 or 6 attempts completely failed - they had too much fooling around with the css portion of my perfectly good template anyway. Ultimately I stumbled on a method posted at RealLife that was simple and works.

Here are the steps to add links below the header like I did. You should be using the template system in blogger to do this.

1. Edit the code to allow the addition of a new page element on the Add & Arrange Elements page.

• Log into blogger
• from the dashboard, choose Manage Layout
• click on Edit HTML
• make a back up copy of your template code (copying it all to a Notepad document is the quickest way)
• Click inside the box that has the code and use CTRL+F to open your browser's search button. You want to find crosscol-wrapper. You should land on a block of code that looks like this:
  
  
• Where is says showaddelement='no', change the 'no' to 'yes'
• Save the template

2. Add and edit new page element

• The procedure in Step 1 made it possible to add a new page element. While still in the template tab, click on Page Elements and there should now be a link to Add a Page Element right below you header.
• Click Add a Page Element and select Text as the type of page element
• Type in the links you want to add for your visitors to navigate with. Examples:

• To add spaces between your links, add a few dashes and change the color of them to the same color as the main part of your blog (in my case white)
  
• Click on Save Changes and you're done!

You also have the option of creating and using buttons for navigation. You can create them with your image editing program or use a free online button generator like buttongenerator.com Next, you will need to host them separately from blogger on your domain or a photosharing service like Photobucket. To link, simply use code like this:

That's it!