Quick Tip: Hide the Navigation Bar on Blogger

When people visit a blog and see a bar like the one above, they know instantly that they’re looking at a free Blogger blog. And while there’s nothing wrong with that, some people may instantly judge the blog to be less professional or authoritative than one without it. If you aren’t ready to move to self-hosted WordPress, you can still hide that annoying navigation bar to give your blog a more polished look.

Here’s how to do it:

1. First, download your template settings. Hiding the navigation bar shouldn’t break your blog, but don’t take any chances. If you’re using the new Blogger interface, click Templates on the left, then look in the upper right for a button that says “Backup/Restore” - just follow the prompts to download the settings to your computer.

2. Go back to templates and click the Edit HTML button.

3. You’ll get a warning that says something like, “This could be scary! Blah blah blah.” Ignore it and click the Proceed button. You’ll see a big box full of code. Don’t be afraid!

4. Press Ctrl+F (or Command+F on a Mac). This will bring up a search box. Type the following, exactly as you see it here:

</head>

Press enter to search. You should see it in the text box - it’s only there once, so don’t get caught up in searching through tons of code.

5. Highlight the following and use Ctrl+C (or Command+C on a Mac) to copy it:

<style type='text/css'>
 #navbar-iframe { height:0px; visibility:hidden; display:none }
 </style></head>

6. Go back to the box of code. Carefully highlight ONLY the </head> tag that you found before, then hit Ctrl+V (or Command+V) to paste the code from #5.

7. Save the template.

8. Go check out how your blog looks without the ugly navigation bar!