How To Remove Blogger Navbar

People love Blogger / Blogspot because they are free and easy to use. And most of them want to be express their thoughts or personality there, meaning that they want their blogs to appear uniquely, distinctive from everyone else. The problem is, some default Blogspot features make it difficult, such as Blogger navbar.

Recently I had just hide / removed my Blogger navbar that usually showed itself in the top of my blog. My reason was its appearance ruined my entire design, made it looked ridiculous. Plenty of people had done this also, and there is no problem with that. By the way, there are two techniques to do this, feel free to choose as you please. Both of them work, I've personally tested them myself.

Technique 1

The first one works by adding some removal codes to your template. To do this, access "edit HTML from "layout" menu. Then find this tags (in upper head section):

/*-----------------------------------------------
Blogger Template Style
Name: ...
Designer: ..
URL: ...
Date: ...
Updated by: ...
----------------------------------------------- */


/* Variable definitions
====================

Then you need to add these beautiful codes to stop the navbar from appearing:

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

So the codes should be implemented something like this:

/*
-----------------------------------------------
Blogger Template Style
Name: The Overture
Designer: Isaac Yassar
URL: isaacyassar.blogspot.com
Date: 10 Dec 2008
Updated by: Isaac Yassar
----------------------------------------------- */

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

/* Variable definitions
====================

Now save the template. If you do it handsomely, the navbar should have vanished for eternity.


Technique 2

This technique is very simple, basically you just need to scroll the position of your page 30 pixels upward, so the navbar will not be visible anymore. To do it, the first step is finding the "body" tags in your template (accessed from "edit HTML" from "layout" menu):

/* Use this with templates/template-twocol.html */

body {

background: ... ;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;

}

If you face some difficulties in finding it, browser's "find" tool will be helpful for you. Once you find it, you need to add these tags to scroll your page 30 pixels upward:

position: relative;
top: -30px;

And next, the result should looks something like this:

/* Use this with templates/template-twocol.html */

body {

background: ... ;
margin:0;
color:$textcolor;
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;
position: relative;
top: -30px;


}

Now save the template and reload your website to see your website's new appearance. If you do it right the navbar should be gone for good.

Is removing the Blogger Navbar legal ?

The Terms of Service for Blogspot.com do not mention anything about Blogger Navbar but it does state a word about the discontinued Blogger AdBar which was previously displayed on freely-hosted Blogspot blogs.

By creating your BlogSpot Site, you agree that Pyra has the right to run such advertisements and promotions.

You also agree that you will not attempt to block or otherwise interfere with advertisements displayed on your BlogSpot site via JavaScript or any other means. Doing so is grounds for immediate termination of service. The manner, mode and extent of advertising by Pyra on your BlogSpot Site is subject to change.

Since it is not mentioned explicitly in the Terms of service, it remains doubtful if removing and hacking the Blogger navbar is any violation of the Blogger terms of service. Lets say we are not "removing the navbar" but only "hiding the navbar" or we could even re-position the navbar to the bottom of the blog. Get rid of the blogger nav bar.

Also, Blogger do not put any promotion and advertisement on our blog, right? Do we want to use Blogger if they put advertisements in our blog? Of course not! That would be ridiculous. The navbar is merely a searching tool. Besides, if we write great contents in Blogger domain, it's already a free promotion for Blogger. They do not need more advertisements, we are the advertisements.

Do you encounter any difficulties in applying it? Do you have any other methods in removing the navbar? Feel free to share it in comments.

12 comments:

EZ Money said...

Isaac, you are a genius.. I have benefited from this article as it removes exit points for my readers.. This has improved my chance at Adsense revenue.. I understand your concerns about focusing on monetization rather than content. I assure you that I have several blogs on several different topics.. My primary passion in life is photography.. Please check out my photography website!

WWW.LOCKEDPHOTOGRAPHY.COM

Also, feel free to drop by anytime and check out new content on my SEO, Page Rank, Blog Basics for Beginners Site

Thanks,
http://blog-basics-for-beginners.blogspot.com

The Malaysian LIfe said...

Hi Isaac,

I've tried method 1 and I go this message when I tried to save the template:

"We were unable to save your template
Please correct the error below, and submit your template again.
More than one widget was found with id: Image5. Widget IDs should be unique."

How do I remedy this ?

Thanks.

Isaac Yassar said...

The problem is not likely to relate to the method because the codes are not related to any widget, may be you mis-paste or mis-edit something there. To test it, go to "edit HTML" once more and don't change anything then save. If you find no problems in doing it, then add the removal codes, it should work like a breeze.

The Malaysian Life said...

Hi Issac,

Thanks for the reply.

Tried method 1 again. Just pasted the code exactly where you mentioned. But blogger wont save it. The same message:

"We were unable to save your template
Please correct the error below, and submit your template again.
More than one widget was found with id: Image5. Widget IDs should be unique."

What is wrong ?

Isaac Yassar said...

Go to "edit HTML" section, then un-mark the "expand template widget" (leave it empty). Then repeat the method, that should do the trick. Let me know if you have successfully done it.

The Malaysian Life said...

Hi Issac,

Thats exactly what I did earlier. But I tried again. It still doesn't work.

P/s: Im not using a normal blogger template but a modified 3 column blogger template. Is this the possible cause ?

Isaac Yassar said...

May be the modified 3 column template is the cause. Have you tried method 2?

admin said...

Wow!
It has worked for me man..!!
Thanx a lot buddy.. you are a sheer genius..!!
had tried 4-5 codes before this..but urs really rocked..!!

charles-davis said...

@Isaac: yes sir, I would say genius. Worked the absolute first time. My next question is why AdSense will not see my sites to verify them, giving me a *404* (?)

But for now, count me happy and a follower.

Isaac Yassar said...

@charles-davis: Hmm, about Adsense, as far as I know, they did not allow blogspot website to sign up for Adsense since they are also Google's. But now that they have put a menu "Monetize with Adsense" inside blogspot page elements, I guess a change has been made.

I never tried to use redirecting service to apply for Adsense, like www.co.cc or www.co.nr (changing my http://isaacyassar.blogspot.com to http://isaacyassar.co.cc or http://isaacyassar.co.nr). If you try this alternative, please let me know the results.

Btw error 404 means your website's address is not found (like have been removed), I guess. Mis-typing the address can cause it.

Gokul said...

Hey isaac ur code rocks. i used it and TADA!! nav bar gone..

But one small prob. im a newbie blogger and i got into trouble when i realised the customize button is the nav bar :D

well i just wanted to ask if u know any short cut way to get into customize?? thats the only button i need from the nav bar. so there any other way to make it pop in the site other than the nav bar.

Isaac Yassar said...

@Gokul: Login to www.blogger.com, you can customize your blog from dashboard >> layout >> page elements.