Friday, April 24, 2009

Tools: Add a Nav Bar to Your Blogger Blog

Blogger users have long lacked an easy way to add navigation bar to the tops of their blogs. Now it's easy with this very handy hack from Beautiful Beta. You can see it in action at the top of BlogCoach.

This is an easy, cut-and-paste hack that doesn't require you to know how to write code. It helps if you're at least to the point where you don't break out in hives looking at your html and CSS. As always, save a copy of your template before you try this.

Follow the instructions at Beautiful Beta, which require you to copy and paste a bit of html to your template (be sure to click "expand widget templates) and a bit of CSS as well. If you hit preview and get an error message, read the comments to the post at Beautiful Beta. It should tell you what to do. If you click "Preview" and you're error free, go ahead and save the template.

Now go to your layout. You should see a new "menubar" item above your header. You won't see any links on the preview yet, because you haven't added any. Edit the gadget and add the links you want to appear. I used links from my labels, a subscribe link, and a link to the BlogCoach Community, all taken from the body of the blog.

There are a few defaults that you might want to change. It requires a bit of CSS fiddling, but nothing scary.

  • The default alignment for the menubar is flush left. If you'd like to make it flush right, as I did, go to the menubar CSS you pasted in your template and change float:left to float:right where it appears under #menubar li {
  • To increase the space between the menubar links, you'll need to increase the padding in your menubar CSS. I changed mine from 5 to 15.
  • The default text color is black. To change the default text color, change the hex code (six digit color code) you'll find at "headerTextColor" to whatever color you want. You can get the hex codes for colors here.
  • To change the hover color, change the "headerCornersColor" hex code.
  • If you'd rather put the menu below your header than above it, you'll need to move the chunk of html you pasted in. Copy it and put it underneath the header html, just above <div id="'content-wrapper'"> (still inside the header wrapper).
Have fun!