Pages

Thursday, September 27, 2012

How to Reduce the White Space Between Lines in Blogger.com (Blogspot) Post

Some Blogger.com templates come with too much white space between lines, then how to reduce the white space to make it looks nicer? I did some searches on Google, people are talking in a generic way other than fixing the Blogger issue specifically.

By reading the code, I have found a simple solution that fixed my problem: change the line-height to a small value.

Here's how:

1. Go to you blog panel, at the left side, click on "template", then at the right, click on "Edit HTML" button.(screenshot below)



2. In the popup window, click on "Proceed" botton


3. In the 'Template>Edit HTML" window, click on option "Expand Widget Templates".


4. We need to search for following codes:

 .post-body {
  line-height: 1.4;
  font-size: 110%;
  position: relative;
}


To search, on you keyboard press 2 keys  "Ctrl" and "F" at same time, you will see a search box come out in the front.
  • If you are using Firefox, the search box will be showing at the bottom left corner
  • If you are using Google Chrome, the search box will be showing at the Top Right corner
  • If you are using IE, the search box will come out at top left 
Now: In the search box, type in or copy .post-body { and hit Enter,  you will see on the Template teh following screen:



5. We only need to do a small change. For the line line-height: 1.4; change the value from 1.4 to 0.8, as in above screenshot.

6. click on "Save Template", then "close", done.

7. Go back to your web page and  reload again. You will notice the difference.

Above fix works great for me, and hope it works for you as well.

It's Your Turn

How did you do to reduce the white space between lines? Is there any other solutions, is there a better way to do? Share your experience and insights in the comments box below.



1 comment

  1. Why there is no pop up window when every time I click the "Edit HTML"

    ReplyDelete