Karlonia.com
For Gold, Peace, and Freedom

Karlonia.com

Remove Blogger Bar: How To Remove the Navbar from Blogspot Blogs

November 19th, 2008

blogger-blogspot-logo.jpgOver 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:

#navbar-iframe {display: none !important;}

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.

remove-blogger-navbar.jpg



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.


20 Responses to “Remove Blogger Bar: How To Remove the Navbar from Blogspot Blogs”

  1. comment number 1 by: Pushhyarag

    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.

  2. comment number 2 by: Karlonia

    @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.

  3. comment number 3 by: luq

    nice post..more descriptive than the post on my blog specially with the video and all.

  4. comment number 4 by: Cosmos

    Your post contains useful tips for Blogging. Keep it up!

  5. comment number 5 by: DrewG

    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?

  6. comment number 6 by: kanha6

    it worked for me and thanks for image and video

  7. comment number 7 by: Anna O

    Wonderful tutorial! You made it so easy to do! Thank you very much.

  8. comment number 8 by: E-Pera™

    Great Tutorial! Will do this soon.

  9. comment number 9 by: Glenn

    Great post…It worked perfectly….thanks!
    -Glenn

  10. comment number 10 by: Kristina

    AWESOME! It worked! Thanks!

  11. comment number 11 by: Darren

    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!

  12. comment number 12 by: Celeste

    Finally…simple and to the point! Thanks so much!!

  13. comment number 13 by: karyn

    this is great! simple instruction and works so well!

  14. comment number 14 by: Ian MacGregor

    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

  15. comment number 15 by: samrez ikram

    awsome code yar.i’m very thankful to u.ur codding is awsome.

  16. comment number 16 by: Shaik

    You rocked. Thanks a ton for the useful work. I have removed the navibar from my blog.

  17. comment number 17 by: Bob Thomas

    Some templates don’t eliminate the whitespace reserved for the Navbar.
    Checkout this article which tells you how to get ride of the whitespace.
    http:/brian-kayser.blogspot.com/2010/10/purge-email-script-for-exchange.html

  18. comment number 18 by: Rupam Guha

    very good info…by using this I have remove the navbar from mobwiki.in

  19. comment number 19 by: Revie

    Thank you so much!
    Quick and Easy!

  20. comment number 20 by: Anonymous

    thank man

Post Your Comments, Opinions, or Suggestions Here:

Name

Email (optional)

Website (optional)