There's a huge empty space left on top of the blog's header after you remove the Blogger Navbar. This space often interferes with the blog's design by pushing down the header. It can be utilized to display - ads, navigation menu, social networking buttons and much more. So why waste it?
1. Log in to your blogger account
2. Go to Template -> Click Edit HTML and then Proceed.
3. Using Ctrl+F look for </head> tag:
4. Now add the following code just above the </head> tag:
<style type='text/css'>
.content-inner
{
margin-top: -40px !important;
}
</style>
.content-inner
{
margin-top: -40px !important;
}
</style>
5. Preview the template before saving.
You can change the -40px to any desired value. Keep experimenting with this value to adjust the header's position.
Click Save once you are satisfied with the changes.
Fantastic post... I was looking for this. You awesome man... thanks.
ReplyDeleteThank you. The empty space above not only looks bad, eating up the precious screen space, it also affects SEO post Penguin. This helped a lot.
ReplyDeletesuperb .... how did i forget about margin-top .. i was trying visibility:none but was not working..
ReplyDeleteThanks for this! It helped a lot!
ReplyDeleteThanks a lot! Worked for me!
ReplyDeleteAll the best,
Tine
Worked For me Thanks a lot man.
ReplyDeletewoow it worked. thanks for your post!
ReplyDeleteThis works great!
ReplyDeleteyup this works great!
ReplyDeletethanks! worked perfectly!
ReplyDeleteTHANK YOU!!! i was looking for this everywhere and finally found it here!! THANKS THANKS!!
ReplyDeleteThank you! I'm glad it helped you all...
ReplyDeleteI played with it a bit to see how it would affect my blog, what a great tutorial, thank you! I don't actually have any space between my header and the top because I have an ad there, but I would like to reduce the space between the ad and the header. Any idea how to do that? (If it matters, I am not actually using the blogger header gadget, I have uploaded an image that I applied an image map to.)
ReplyDelete~Jamie
Hi Jamie,
DeleteI did not see any ads on your blog near the header. Although, it wasn't clear from your comment as to what adjustments you're seeking, however, if you have few pixels here and there bothering you, I would suggest you change the padding near that region or use the above method. This should be fine.
This comment has been removed by the author.
ReplyDeleteHey, great post! I wondered if this was possible for the left and right sidebar margin/paddings? On my blog there is a significant gap between the background and actual text on the main body and I would like them to be practically next to eachother. If this doesn't make sense I will happily show you an example of what I would like. Thanks a lot, really appreciate it!
ReplyDeleteHi Lucy,
DeleteYou can simply manipulate the width from the template designer itself. I don't think you'll have to add any code.Just go to Template - > Customize -> adjust widths and adjust the slider. That should be enough.
However, if it doesn't work use this method.
1. Template - > Edit HTML
2. Search for ".content-outer"
and add this line "margin-right: -20px;" Adjust the pixel values as needed.
Worked brilliantly with removing the gap at the bottom. Thanks!
ReplyDeleteThanks John!!
DeleteThank youuuuuuuuuuuuuuuuuuuuu!!!!
ReplyDeleteThank you!
does not work for me :(
ReplyDeleteThis is one of the simplest tweaks... Can you post your blog url? I can have a look...
DeleteThanks so much for this, you are a lifesaver! I've been looking for ages ;)
ReplyDeleteA few other things, I wanted to also get rid of the space on the left side because I want my header to stretch out the entire length of the page. So what I added was
margin-left: -81px !important;
However, as you can see my entire body content also shifted along to the left. Is there anyway to keep the body content centered? I would also like the body content (so the post body and the sidebar on the right) smaller (in width) than the actual header, is there a simple way of doing this?
Lastly, (I hope these are not too many questions at once!), I would like my header to run the entire width of the page. Is there a way of doing this or would I simply have to adjust the width of my header in my illustrator program?
Thank you in advance :)
Florentine
My blog: http://readiculously-peachy.blogspot.com
Florentine,
DeleteYou got to reduce the size of your header image to get rid of the extra space. And you need to be precise with it. Its the header image that's stretching extra space on the right side.
To center align your blog just use the template editor and adjust the width.
If all these doesn't work try adjust the header margin -
find ".header-outer" and add margin-right:-10px;
Please let me know if you need more help.
Great post! thanks a lot for sharing this useful post with us.
ReplyDelete