Friday, February 18, 2011

Removing or Hiding NavBar in Blog

When browsing Blogger powered weblogs hosted on domain or custom domain, there is always a NavBar (Navigation Bar or Banner) that appears on top of the blog. The Blogger NavBar contains Search Blog text-box, Flag Blog to notify Blogger about objectionable contents on the blog, Next Blog link to visit another blog randomly, plus links to create blog or sign in to Blogger.
      No many visitors nor bloggers themselves may find it useful though. It’s possible to hide and remove the NavBar with a little CSS hack. The trick will not interfere or mess up with the custom layouts that webmaster has designed, and pretty safe and easy to implement. In fact, if you’re publishing the blogger Blog to own custom domain with FTP or SFTP, it’s possible to turn off NavBar.


1. Sign in to Blogger.
2. On the Blogger Dashboard, click on the Layout link of the blog that you want to disable its NavBar. You can also click Customize on NavBar while visiting your blog.

3. Under the Layout tab, click on Edit HTML tab to view the template’s HTML code.

4. Search for the following line of code:


Before the line, add in the following line of code:

#navbar { display: none; }


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

5. Click on SAVE TEMPLATE to make the change effective.

No comments:

Post a Comment