Blogger Seo Tips – Part 3 – Remove Blogger NavBar

Looking at the amount of emails I got about the Part 1 and Part 2 of my Blogger Seo Tips, I decided to pay more attention to Blogger. I guess Blogger users really feel left alone, don’t they? On part 1, I helped you guys to optimize your blogger settings before actually setting up your blog, and on part 2, I showed you how to imitate the <!–more–> function in WordPress. On Part 3, we will be removing the Blogger Navigation Bar at the top.

Remove Blogger Frame SEO

Through trial and error, I have come to a conclusion that frames actually hurt the SEO potential of your site. Let’s say you have 2 frames on your page. It means the importance of the page is divided into two. For example, Googlebot will visit your main frame as frequently as your other frame possibly containing a menu or not-so-important data. Therefore do not use frames!

Well, that was just a random seo tip for you guys since the blogger navigation bar you see at the top is purely CSS :). Therefore its not killing your site’s SEO potential as much as a frame, BUT the text at the top is what gets indexed at first. You want the search engine bots to read the main content at first. To do this:

- Log in to blogger

- On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog’s HTML.

- On a usual html based page, you need paste the CSS code below between <style> … </style> tags. But in blogger, you need to paste the below code after <b:skin><![CDATA[/*


#b-navbar{
height:0px;
visibility:hidden;
display: none !important;
}

9 Comments to “Blogger Seo Tips – Part 3 – Remove Blogger NavBar”

  1. Ilkka Kauppinen 3 January 2008 at 1:18 pm #

    Thanks for great advices! For some reason code of yours did not work. I did it this way that worked:

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

    Regards from Finland!

  2. Ken 12 June 2008 at 10:02 am #

    Thanks for these blogger tips. To hide the navbar for the new blogger, it should be:

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

    Cheers!

  3. Alicia 7 May 2009 at 2:00 am #

    It doesn’t work for me. I pasted it directly after the text above, doesn’t work.

  4. Chris 9 June 2009 at 7:17 am #

    Thanks to you all that responded with the correct answer to this I oten got iframe warnings about this navbar

  5. Ian MacGregor 19 August 2009 at 3:03 am #

    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

  6. Jukka H 24 August 2009 at 10:53 pm #

    I would also say it is against Blogger TOS. Otherwise great tip, even it is unuseable.

  7. pixelshots 4 September 2009 at 6:48 am #

    don’t know about seo, but i think the nav bar brings some traffic to blogger blogs with them for some people uses next blog button on navbar and blogger displays only blogs with navbar.. can v make our content index first time without removing the nav bar??

  8. Iulia 13 May 2010 at 5:20 pm #

    Well..I have found the exact information on LOTS of sites…but it does not work…I must be doing it wrong..I am not a html conessieur..but sounds easy…stil..my Navbar is still there..maybe you cold help…do I place it ok?

    <![CDATA[/*

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

  9. Iulia 13 May 2010 at 5:36 pm #

    I have finally made it..but the code can be inserted anywhere in the template(still dont know why it didn’t work the fist time).I inserted it just before “body{” like this:

    ———————————————– */
    #navbar {
    height: 0px;
    visibility: hidden;
    display: none;
    }

    body{
    margin: 0;
    text-align: center;
    min-width: 760px;


Leave a Reply