Skip to main content

How to Hide or Remove Blogger Navbar

Turn Off the Blogger  NavbarHow to hide and remove the Blogger navbar with simple CSS, How to Turn Off Blogger Navbar and why you should remove and disable the blogger navbar

Bloggers automatically inserts a little navigation toolbar (called Blogger Navbar) in all pages of blogspot blogs. This Blogger Navbar gets tucked into the top of the browser window and is supposed to add new (?) functionality to each blog. Blogger Navbar is 50 pixels high and spreads across the entire width of the browser window.

1. There are two buttons on the navbar that point to the Blogger Homepage. Too much of self-promotion.
2. The NextBlog button takes visitors to another recently-updated randomly selected blog on blogspot. But what if clicking the NextBlog button takes my innocent readers to a blog with adult offensive content.
3. The Search Blog Form is not integrated with my Adsense for search account. I want visitors to use my custom Google site search form that is monitized by Google Adsense.
4. The existing Blogger Navbar colors do not gel with my custom blogger theme.
5. The BlogThis! pop-up link is already availble when I enable Blogger Backlinks.

To hide the Blogger Navbar, try any of these CSS techniques. [they should work with Blogger Beta or Blogger 3.0 as well]

Technique One: Insert (copy, paste) the following CSS code in your Blogger Template to disable the Blogger Navbar
<style type="text/css">
#b-navbar {
height:0px;
visibility:hidden;
display:none
}
</style>
Technique Two: This is another simple way to remove the Blogger Navbar but it will not form valid HTML. Replace your <body> tag with the following code and hide will hide the Blogger navbar.
<noscript><body></noscript>
Technique Three: Similar to technique two for hiding the blogger navbar but doesn't form valid HTML. Replace your <body> tag with the following code and hide will hide the Blogger navbar.
<noembed><body></noembed>
I use the first technique for this weblog as it results in well-formed HTML. Remember GoogleBot hates pages that are not constructed with well-formed HTML. But hiding the blogger navbar gives rise to another problem. You might notice some empty space in your webpages between the top edge of the browser window and your blog content. We will again employ a simple CSS tweak to remove the gap at the top.
body
{
margin-top:0px;
}
If this doesn't remove the gap created with Blogger Navbar, try the following CSS hack
body
{
margin-top:0px;
position: relative;
top: -50px;
}
Is removing the Blogger Navbar legal ?

The Terms of Service for Blogspot.com do not mention anything about Blogger Navbar but it does state a word about the discontinued Blogger AdBar which was previously displayed on freely-hosted Blog*Spot blogs.
By creating your BlogSpot Site, you agree that Pyra has the right to run such advertisements and promotions.

You also agree that you will not attempt to block or otherwise interfere with advertisements displayed on your BlogSpot site via JavaScript or any other means. Doing so is grounds for immediate termination of service. The manner, mode and extent of advertising by Pyra on your BlogSpot Site is subject to change.
Since it is not mentioned explicitly in the Terms of service, it remains doubtful if removing and hacking the Blogger navbar is any violation of the Blogger terms of service. Lets say we are not "removing the navbar" but only "hiding the navbar" or we could even re-position the navbar to the bottom of the blog. Get rid of the blogger nav bar.

Popular posts from this blog

How to Download Contacts from Facebook To Outlook Address Book

Facebook users are not too pleased with the "walled garden" approach of Facebook. The reason is simple - while you can easily import your Outlook address book and GMail contacts into Facebook, the reverse path is closed. There's no "official" way to export your Facebook friends email addresses or contact phone numbers out as a CSV file so that you can sync the contacts data with Outlook, GMail or your BlackBerry. Some third-party Facebook hacks like "Facebook Sync" (for Mac) and "Facebook Downloader" (for Windows) did allow you to download your Facebook friends' names, emails, mobile phone number and profile photo to the desktop but they were quickly removed for violation of Facebook Terms of Use. How to Download Contacts from Facebook There are still some options to take Friends data outside the walls of Facebook wall. Facebook offers the Takeout option allowing you to download all Facebook data locally to the disk (include

PhishTank Detects Phishing Websites by Digg Style Voting

OpenDNS, a free service that helps anyone surf the Internet faster with a simple DNS tweak , will announce PhishTank today. PhishTank is a free public database of phishing URLs where anyone can submit their phishes via email or through the website. The submissions are verified by the other community members who then vote for the suspected site. This is such a neat idea as sites can be categorized just based on user feedback without even having to manually verify each and every submission. PhishTank employs the "feedback loop" mechanism where users will be kept updated with the status' of the phish they submit either via email alerts or a personal RSS feed . Naturally, once the PhishTank databases grows, other sites can harness the data using open APIs which will remain free. OpenDNS would also use this data to improve their existing phishing detection algorithms which are already very impressive and efficient. PhishTank | PhishTank Blog [Thanks Allison] Related: Google

Digital Inspiration

Digital Inspiration is a popular tech blog by  Amit Agarwal . Our popular Google Scripts include  Gmail Mail Merge  (send personalized emails with Gmail ),  Document Studio (generate PDFs from Google Forms ) and   File Upload Forms ( receive files  in Google Drive). Also see  Reverse Image Mobile Search , Online Speech Recognition and Website Screenshots , the most useful websites on the Internet.