Google’s blog engine, Blogger, is a decent and well-used blog option for people who want to get their message about the latest “Bachelor” episode or their take on the “Lord of the Rings” trillogy out to the world. But there are drawbacks. Most notably is Blogger’s inability to offer its users a navigation menu. If you want to get your blog away from the simple, yet difficult-to-navigate template like:

to something a little more like a real website:

there are a couple of workarounds we can utilize.

We used an image for the header to bring a more professional, branded look to the project. But instead of inserting the image “Instead of title and description“, we selected “Behind title and description” and left the Blog Title and Blog Description.

When you’re logged in to your blog, click the “Layout” tab. Then click the “Edit” hyperlink in the (Header) section in the “Add and Arrange Page Elements” area. In the Blog Description, we placed links like “<a href=”/”>HOME</a>” and left the Blog Title as it was.

This will give you the functionality that you want with the navigation menu, but you’ll need to alter the styles (this can’t be done in the “Blog Description” area per Blogger restriction) of the title and descritpion (your menu) to perfect the look. To alter the styles, go to Layout>>Edit HTML and look for the style associated with the Description. For our project it was #header .description but may be different for other templates. Since we had the title of the website in the header image, it was redundant to show it from the “Blog Title” section, so we applied “visibility:hidden;” to the #header h1 style.

Happy blogging!