Thursday, October 28, 2010

Remove Blogger Navigation Bar AND whitespace

Problem
Didn't want the default Blogger NavBar.  Found a way to remove / hide it, but the whitespace reserved for it remained.

Solution
The "#navbar-iframe" code below removes the NavBar, but in my case it did not remove the whitespace.  The following line was supposed to remove the whitespace but did not; so I started adjusting it with negative numbers and bingo!  For this blog I found -60 removed all the whitespace, results may vary!

Add the following code within the STYLE section of your template if there is one, otherwise add the STYLE tags as below.

<style type='text/css'>
<!--Remove NavBar -->
#navbar-iframe {height: 0px; visibility: hidden; display: none;}
body #header {margin-top:-60px !tweak until you get desired results;}
</style>


Add it where???
If you're not familiar with editing the template, here is a step-by-step guide:

  1. Log into your blogger.com account
  2. Within "Manage Blogs", click DESIGN on the blog you want to apply this to
  3. You will be taken to the "Page Elements" screen.  Now click EDIT HTML under the tabs.
  4. To be on the safe side, you may want to backup your current template with the option provided
  5. Search for "</style>" on the page to see if there is a style section, if there is, add the code there (without the STYLE lines).
  6. If not, search for </head> and then add the code above it, including the STYLE lines.
  7. Preview it, if it still has whitespace try increasing the number.  If it cuts off your header, try decreasing the number.  Increments of 10 would be good to work with.


Update: (you  may need to follow these steps for different templates)

Here are the steps to remove the Blogger Navigation bar /Blogger Nav Bar
1. Log into your blogger account
2. From your Dashboard choose Layout
3. Now choose the Edit Html option
4. You will see your template code
5. Optional: you may want to copy and paste it to Notepad (or something) as a backup
6. In that template code find
]]></b:skin>
and replace it with

#navbar-iframe,#navbar { display: none !important; }
]]></b:skin>
7. Preview it - the nav bar should be gone. 
8. Now select SaveTemplate.

1 comment:

  1. Horey... It`s fixed! thank you, I appreciate you for taking the time out of your day to share the great part from your experiences and honestly I got it at the best point. If you have another free time would you please share your thought on our newly added product here http://www.royalgorden.com/. Thank you in advance and have a great time...

    ReplyDelete

Please let me know if this helped you out, or if you would like to submit other suggestions or correct something I may have mis-stated.

About Me

My photo
Science Fiction Author / Vice President of Technology for The Christman Company