Hide navbar for New Blogger

Blogger has started advertisement above the navbar (the usually blue navigation bar at the very top of a blog) on a random basis (now you see it, now you don't) and this has taken valuable space. See screen shot below:



Since that is taking valuable real estate plus the fact the the Blogger TOS (Terms of Service) did not specify that one must have it for the blog, I have decided to hide the navbar.

There are various ways to do that, not all of them effective. I have found that the hack by Aditya to be effective.

Aditya's hack is simple. Here is my interpretation of his hack: Go to LAYOUT > EDIT HTML to open the template editor. Look for <b:skin> and paste the following after that:

/* By Aditya http://the-lastword.blogspot.com/
----------------------------------------------- */
div.navbar {
opacity:0.0;
display:none;
}

Related posts:
Simple adjustable way to hide navbar
How to hide navbar for New Blogger (xml template

Continue reading →

How to hide the navbar for New Blogger

Refer to Simple adjustable way to hide Navbar for an easier way to hide the Navbar. Also see earlier update at the bottom of the post.

The navbar is compulsory for bloggers using blogspot.com for their blogs, and it can also be useful. It has a search box which will allow visitors to search the content of your blog. You can also change the color of the navbar to blend with the colors of your blog by going to the LAYOUT and right at the top, you will see a section for navbar. Click EDIT and chose the color for the navbar.

However, many people have expressed the desire to remove the navbar as there is "Next Blog" in the navbar which when click will lead to an unpredictable blog which may contain sexually explicit content, etc and about which people like educators who set up blogs for their students are very unhappy about.

Update 29 July 2007: Accoring to Kawaljit of Maybe it is OK to remove Blogger navbar, Google did a series of road show in some Indian cities to promote their Blogger platform. Ankit attended the event and asked for clarification on the navbar policy from the Google representatives at the roadshow. They called up their office in Bangalore office and confirmed that it's legal to hide the navbar.

If you really want to hide the navbar, this is how to go about it. Whenever you make changes to the template, it is always wise to backup the template first. If you are not familiar with that, refer to this post: Backing up and changing New Blogger template.

Sign into Dashboard, click LAYOUT for the relevant blog and then click the EDIT HTML sub-tab. This will open the template editor window. Look for this tag: </head>. Paste this script immediately above that tag:

<style type='text/css'>
#navbar-iframe {
display: none;
}
</style>

so that what you see will be

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

Preview, and if satisfied, click "Save Template".

To demonstrate, I will hide the navbar from this blog DIY (Do It Yourself) which is a blogspot blog.

There are New Blogger templates by Final Sense which you get via links in New Blogger 3 column templates by Final Sense. Although there is a navbar Page Element in the Layout of the most blog templates, there are no navbar for blogs using Final Sense Color templates. So if you don't want a navbar, but have an excuse for it perhaps you may want to consider using Final Sense templates.

Update 5 July 2007: A blogger commented this method don't seem to work anymore. I tested before I published and it work, but on getting him comment, I tested again and found that what he said was true. I have tested a slightly different way of doing it at Another way of hiding the navbar and found that the alternative way worked. So if you still want to hide the navbar, refer to the new post.

Amazon products for Blogger

Related posts:

Another way of hiding the navbar (February 2007)
How to hide New Blogger Navbar (October 2008)
Simple adjustable way to hide Navbar (January 2010)

Continue reading →

Tip: Hiding the navbar

Update 24 May 2007: A blog visitor complained that the instruction didn't work for him. This post was written before New Blogger was introduced and perhaps it wouldn't work for New Blogger. If you are using New Blogger template, refer to How to hide navbar for New Blogger

Update 24 October 2006. Some people have very stong opinion about the hiding of the navbar as it violate Blogger TOS (Terms of Service). They feel that Blogger is asking very little of bloggers in return for providing this free service. Please read the rest of this post with that in mind. And be reminded that there are advantages of having a navbar at the top of your blog. However, many people are wary of the Next Blog link in the navbar which takes to to random Blogger blogs, some of which may contain explicit sexual content, hate messages, etc. Some educators who want to set up blogs for their students are understandbly wary of this and want to remove the navbar, and I can understand why.

The navbar is the bar at the top of every blogspot.com blog that contains from left to right, the Blogger logo, a search box, Search This Blog, Search All Blogs, Blog This!, Get Your Own Blog, Flag, Next Blog. It is by default dark blue in color, but it may have been changed to tan or some other color.

Many bloggers for some reasons or other want to hide this navbar. To hide the navbar, try adding this code in between the <style></style> tags, in the <head> section.

<!--Code to remove blogger navbar-->
#b-navbar {
height:0px;
visibility:hidden;
display:none
}
<!--End of code to remove blogger navbar-->

However, here are some reasons why one should keep the navbar. For one, I believe the navbar is required as per Blogger's Term of Service. Another is to allow visitors to navigate around your blog by using the blog search box at the top left-hand corner. In fact, on my blog, I have 2 search boxes, one in the navbar and one Google sitesearch box. I have noticed that the search results from the 2 boxes differ. One search result may turn up a relevant topic when the other one fails to do so.

NEWER POST

OLDER POST

Continue reading →