Hide or remove navbar on Blogger blog

Tweet

Blogger navbar is just like a menu bar that contains hyperlinks in order to control Blogger settings which appears by default at the top of every Blogger blog. With this navbar, you can search the blog you are viewing or visit the next blog. You can also flag a blog for posting some objectionable content using this navbar.

It is available in several colors, and you can configure it in the Layout tab in Blogger's interface. If you're using a classic template, you'll see a menu from which you can select a color. For blogs using Layouts, just click the "edit" link on the Navbar page element.

The main reason to hide Blogger navbar is when you click on the "next blog" button, you may land into a spam blog. There are so many spam blogs with adult content or other information you don't want young people to read. When you block the navbar on your blog, you can easily prevent others from leaving your site and also accidentally heading to one of these spam blogs.

Reasons to hide Blogger navbar

• It's an eye sore and makes your blog look less professional.
• When you click on the "next blog" button you never know what type of blog you might stumble upon.

Reasons to keep Blogger navbar

• Blogger [B] logo takes you back to Blogger dashboard whenever you need, in a single click.
• Your blog readers can easily make a search using search box. Results will appear directly on the page.
• 'Follow' feature let your visitors to follow your blog publicly or anonymously, so that they stay updated with your blog posts on their Blogger dashboard.
• 'Share this blog' allow your blog readers to promote your blog on Twitter, Facebook and Google Reader.
• 'Next Blog' option takes you to a random blog.

Is it legal to hide the Blogger navbar?

The Terms of Service for Blogger did not mention anything about Blogger navbar. I read a post recently by Blogger employee that stated

While we don't recommend or support the removal of the Blogger navbar, there is nothing in our Terms of Service that explicitly mandate its use.

So, you are allowed to hide Blogger navbar.

Hiding the Blogger navbar

First you need to backup your blogger template. In your blogger dashboard, click on 'Design' > 'Edit HTML' and then click on 'Download Full Template' and save your template.

1. Go to Blogger Dashboard > Design > Edit HTML.
2. Press CTRL+F to find the code ]]></b:skin>
3. Copy the below code

.navbar{visibility:hidden; display:none}

4. Paste it on top of ]]></b:skin> this code or anywhere in the CSS section of your template.
5. Preview your template and if everything works fine, then save it.

If it does not works, then use the below code instead of the above.

#navbar-iframe{height:0px; visibility:hidden; display:none}

If you want the navbar back in the future, then just remove the code you have added to your template.