So you haven’t made the jump yet from a Blogger blog to a self-hosted one. Do you really need to have that annoying Blogger navbar display at the top of your page? 

Well, according to Blogger’s ToS, you do. But, if you’re feeling brave, it’s incredibly simple to hide it.

It’s not very easy to physically remove it, but hiding it accomplishes the same goal. Your users will never see it, and it won’t interfere with any custom layouts you’ve designed.

Editing Your Blogger HTML Template 

In order to hide the navbar, you’ll need to edit your Blogger site’s HTML template.

To do so, go to your Blogger dashboard as if you were going to write a post. Then click on the “Layout” tab and choose “Edit HTML.”

This should bring up a giant box of text that you can edit (see the screenshot to the right).

If you are using the the classic template, you will either have to “Upgrade Your Template” (using the instructions that follow) or use slightly different code at the end.

Click on the “Layout Tab.” Then, choose “Customize Design.” Click the “Upgrade Your Template” button and choose the template you want.

Now, click on Layout -> Edit HTML.

Adding the New Code

In order to make the Navbar hidden, you’ll only need to add one line of code.

The beginning of the text in the textbox (your HTML template) deals with styling information. You want to scroll to the end of that. Scroll down until you see the following line:

]]></b:skin>

Just before that line, add the following line of code:

#navbar { display: none; }

Then click the Save Template button, reload your blog, and your navbar should be gone!

If you are using the classic template, you’ll need to do things only slightly different. In your template, search for this line:

</style>

Then, add the following line of code before that line:

#navbar-iframe { display: none; }

Why the difference? Blogger uses a slightly different mechanism for the navbar in the classic template. It’s launched in an iframe, which is styled by the id #navbar-iframe. In the customized templates, the navbar is within the main page, so you can hide it directly without having to hide the iframe.

That’s It?

Umm… yeah.

I’ve seen some examples online where people included a bit more styling information (zero-ing out the margins and padding, for example). I haven’t found this to be necessary.

I used the code above and tested it (example here) in Google Chrome, Firefox, and Internet Explorer and they all seemed to work fine.

Like I mentioned before, this is technically against the Blogger T.O.S., so you’re following this advice at your own risk. I doubt Google would notice, though, and if your site is popular enough to draw Google’s attention you should probably have moved onto a self-hosted blog anyway.