Remove Blogger Bar: How To Remove the Navbar from Blogspot Blogs
November 19th, 2008
Over the past few days, I have been exploring the idea of creating some different kinds of blogs using Google’s free Blogspot domain and optimizing them for AdSense monetization. During my research, I read about a useful tip that was mentioned by several of the more experienced money-making bloggers in this particular genre.
They suggested the idea of removing the top navigation bar that appears by default in all blogs hosted by Blogger. From a monetization standpoint, it makes sense to get rid of the navbar because it plugs a possible “leak” in your site through which visitors could escape without clicking on an AdSense or affiliate link. Others may want to hide the bar for cosmetic reasons so that it does not cover up the top of the header and immediately tag the site as “just another Blogspot blog.”
It turns out that removing the Blogger bar is actually quite simple. Here are the basic steps:
1. Go to your Blogger dashboard while logged into your Google account.
2. Click on the “Layout” link beside the title of the blog that you want to edit.
3. Click on the “Edit HTML” link (currently the third one from the left under the Layout tab).
4. Under the title tag and template style commentary, place the following line of code before the part where the variable definitions are declared:
Here is a screenshot of the CSS text that shows where you should put the line of code. It should be placed in the spot where I have highlighted the text with a gray background.
5. Click the orange “Save Template” button below the window to save the changes. You may want to back up the template first if you’re worried about making a mistake.
6. Voila! You can now click on “View Blog” and see that the dreaded blue bar across the top of the screen has magically disappeared.
Meanwhile, for those of you who would like to see a video presentation of this technique in addition to reading the text, here is a video tutorial on this that was produced by someone named Steven posting under the username of AffiliateDiary:
After removing the navbar, you should now be able to see the full header image and have your blog look somewhat more professional. This should increase the likelihood of visitors staying on your site long enough to read your content and click on some of your monetized links.
Webmaster,
I found Amanda at Blogger Buster highlighting navbar vis-a-vis Google’s Policy. Do you too feel this is an issue?
I have a blogspot blog & I have always wanted to incorporate a sitemap page in my blog as you have done here. Feasible? How.
Thanks.
@Pushhyarag:
I have not seen the Blogger Buster source that you mentioned, but I did see a similar question asked by a commenter at YouTube. Frankly, I’m not sure if this is against Google’s policy or not - I do know that I have seen several other Blogger blogs with the navbar removed (including the one in the tutorial video) that still exist after more than a year without any problems. If it does become an issue in the future, however, it would be very easy to remove the line of code in order to bring the blog into compliance.
The sitemap question is a good one; I have been wondering about this also. I’m still very new to the Blogger platform (I originally started with WordPress), but I will research this over the next few days and see if I can come up with a relatively easy sitemap solution. If I am successful with this, I can always do another tutorial post that covers this particular topic.
nice post..more descriptive than the post on my blog specially with the video and all.
Your post contains useful tips for Blogging. Keep it up!
Do you know how to hide the Blogger logo from next to the person’s name in the comments? I am hosted by blogger, but now have my own address. Is there a way to remove that?
it worked for me and thanks for image and video
Wonderful tutorial! You made it so easy to do! Thank you very much.
Great Tutorial! Will do this soon.
Great post…It worked perfectly….thanks!
-Glenn
AWESOME! It worked! Thanks!
great tip!
works for me - I’ve incorporated my blog into my company website using an iframe to drop it in below the main top section & nav for the site, thereby maintaining the overall look & feel of the site - the nav bar would ruin the effect, so it’s great that this tip works!
Finally…simple and to the point! Thanks so much!!
this is great! simple instruction and works so well!
In case anyone is interested in whether or not hiding the blogger navbar is a violation of the Blogger TOS, it isn’t. See the following post with an explanation by a Blogger employee:
http://groups.google.com/group/blogger-help-customizing/browse_thread/thread/c7e3226fe35da11e?fwc=1&pli=1
awsome code yar.i’m very thankful to u.ur codding is awsome.