Tuesday, December 05, 2006

Hide or Remove Blogger Navbar in Blogger Beta

Well i have been looking in to Bloggers terms of service of whether we can actually hide or remove Blogger Toolbar. The answer to that would be an YES or NO. It could be argued in both the ways. Blogger specifically does not mention that you should not remove or hide the navbar but there is always the condition that if there is no option to change the content then it means that you should not modify the content. Anyway the topic is really arguable in both the sides and hope blogger updates its terms of service. Here is the terms of service of blogger



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


Coming to the point of Hiding Blogger Navbar in Blogger Beta. As Blogger got updated to Blogger Beta there had to be a solution to hide the Blogger Navbar as the hack for the Blogger version doesn't hold good for the Beta Version. There are two methods that one can use to hide the Navabar:
To start off you need to:
  1. Login to Blogger Beta In the Dashboard
  2. Click on the Link Template
  3. In the Template click on the Link Edit HTMLHere
  4. you can see the blogger template code and now look for
  5. place the below code in betweens the above style sheets and you are ready to go

Method1: (for Blogger Beta)

Using CSS style of hiding the Navbar. We write a simple piece of code
#navbar-iframe /* Indicating to the Navbar ID */
{
height: 0px; /* Reducing the height of the Navbar to 0px */
visibility: hidden; /* Reducing the visibility to hidden */
display: none; /* Remove the display option(indirectly hiding it */
}
Method 2:(source:Bloggeratto)
#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

For those who are still using blogger version you can implement the method 1 by replacing #navbar-iframe with #b-navbar and the hack does work out well

Users let me know your comments if the technique works for you

4 comments:

Subha said...

Kishore, I like reading your techie tips! :) One small suggestion - near the "Post a comment" link, there's so many other icons that it distracts one. Is there some other way you can arrange the other icons so that the "Post a comment" link stands out? :)

My $0.02..keep up the good work! I'll keep coming back to this blog..

Priya said...

hello..
enna ore techaa ezhuthara!!!

Kishore Reddy said...

subha

Yup i guess i will change the layout a bit to make some room near comment posting section

Priya.

Yup just started to techie blog... how do you like it

Rocky said...

How to apply this for new blogger?