Saturday, November 3, 2012

How to Remove the White Space Above the Header (Blogger Template)?

Sponsored Links

I've recently removed the white space above the header of my other Blogger blog, i-Share, and placed an expanding Nuffnang ads in it. The Nuffnang ad used to float in that area with so much gap between it and the header. In times that the ad is in minimized mode, it shouldn't be eating that space and the header should be touching the URL bar of the browser thus, pulling more of the blog contents of the above the fold. 

The gaps usually appears after removing the Blogger navigation bar.

 Click image to enlarge

How to Remove the White Gap?
This is applicable for Blogger users.

1. Go to your Blogger account.
2. Select the blog you want to remove the gaps. Go to its Template, then Edit HTML, select Proceed, and tick the Expand Widget Template.
3. Press Ctrl+A and Ctrl+C in your keyboard. This will copy the codes of your template.
4. Open Notepad in your desktop and paste the codes there. This will serve as your back-up for your codes in case the editing will fail (but it usually don't).
5. Open another Notepad and paste the codes again. This is where you'll edit the your template codes.
6. Search for #outer-wrapper in your codes. You can do this by pressing Ctrl+F and pasting #outer-wrapper  in the Find what bar. If it says "Cannot Find #outer-wrapper", press OK and choose the direction to UP.
7. Once you locate it, look for the code margin-top: 20px below it and edit it to -40px. The value will depend on your liking, just do a trial and error to see what suits you best. Mine is like this:
#outer-wrapper {
margin: 0 auto;   /* to make the template lay in the screen center */
padding: 0px 0px 0px 0px;
margin-top: -40px;
 8. Copy-Paste the code from your Notepad to the Blogger Template window. Preview it and if what you are seeing is OK already, then hit Save Template. :)

Drop me a comment below if it works or not.
Don't forget to share this post.
Sponsored Links

Related Topics:


  1. Thanks for the post bout how do you remove it from the footer thats the trouble I am having take a look at it

  2. there is no "expand widget template" in my blogger html template editor

    1. Well, it's ok. You can just skip the expand widget template step and proceed with the next. It is because blogger had updated their interface.

  3. I have issue i can fix my blog does't have #outer-wraper so kindly provide some solution to fix my blog template i have to expande the space with 20px but it does't show #outer-wraper. You can also check my blog Learn C Programming