How to remove space above blog title (header) and below footer in Blogger.com (blogspot)

Most of the Blogger.com templates have left some extra space above the blog title (header) and below the footer. I'd prefer to not have these space so that the blog title can be at the very top. If you are like me and looking for solution to remove those space, here's my solution for your reference.


Here's how:

1. Go to your  blog panel->Template -> Edit HTML-> Proceed -> put a check mark in front of the the "Expand Widget Templates" option (details: same as the first 3 steps in this post)

2. On you keyboard press the 2 keys  "Ctrl" and "F" at same time to bring up the search box

3. In  search box, type in "content-outer" and click on "next" to search 2 times (or more) until you see following codes in the template:

.content-outer {
  background: $(content.background);

  -moz-border-radius: $(content.border.radius);
  -webkit-border-radius: $(content.border.radius);
  -goog-ms-border-radius: $(content.border.radius);
  border-radius: $(content.border.radius);

  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

  margin: $(content.margin) auto;
}

4. Notice the line highlighted by yellow? Replace the "$(content.margin)" with 0 (number zero), and click on "Save Template", then "close". done.

5. Go back to your blog and refresh your webpage, you will see the Blog Title now is reaching the top of the page !

It's Your Turn

How did you do to remove space above blog title? Is there other way to make the blog title (header) looks better? Share your experience and insights in the comments box below.