November 23rd, 2011

How to Remove the Ugly Navigation Bar From Your Blogger Blog

It is really quite simple and painless to remove the blogger navigation bar from your blogger blog.

This should be done to look more professional, whether you are using a .blogspot blog or you went ahead and purchased your own domain.

In fact, this is one of the first tricks for blogger that I ever learned.

What is the blogger navigation bar?

It is the horizontal navigation bar at the very top of your screen while you are viewing the average blogger blog.

In fact, even when you have purchased your own domain, it is a dead giveaway that you are using blogger to host it.

Image of blogger navigation bar. Yech.

But since we do not want to be average, we are going to remove the navigation bar for blogger

To keep it simple, I am going to use blogger’s old interface but the steps are the same for those who have already switched to the new one.

I’m just going with what feels more comfortable to me.

Ok, so log in.

Click the Design tab.

Blogger Logged In Screen

Mosey on over to the Edit HTML tab

Blogger Design Page

In Edit Template, scroll down the html until you find the code that reads /* Variable definitions.

It is pretty near the top of the code in most themes.

If you can’t find it in your theme, you may need to use your browser’s search feature.

Hold down the control key (CTRL) on your keyboard and without letting the control key go, press the F one time.

In the box next to the word Find, type in /* Variable definitions and hit enter.

You May Also Like:   I'm so struggling with the Wordpress Importer

It should take you right to the piece of coding that you need.

Blogger Edit Template

Right above that piece of code type or copy/paste the following piece of code.

#navbar-iframe {

display: none !important;


Click PREVIEW and the navigational bar should be gone.

Now it is safe to click SAVE TEMPLATE and you should have completely removed the blogger navbar.

Enhanced by Zemanta

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>




CommentLuv badge