Tuesday, May 5, 2015

Blogger: How to Change Blogpost Line Height

I was googling for this yesterday, and despite of finding some blogs and help tutorials, they aren't very update with the current Blogger customization steps.

Most advices is to:
  1. Go to Dashboard > Design > Edit HTML.
  2. Find some line with post-body then line-height. It suppose to look something like this:
  3. .post-body {
      line-height: 2;
    }
  4. Change the number to whatever line height you desire.
  5. Save the template.
  6. Check with your post/refresh your blog to see if it goes right.
BUT none of the tutorials I read mentioned about how to find that specified "post-body" line
within 2590 lines of codes. Yes, it wasn't quite a long bunch of codes. My husband might smirk at me if I said it was overwhelming lines of codes, but it was for a non coder blogger.

I tried to use Ctrl+F/Find with Chrome browser but it doesn't help much. It seems like the Find feature only works for what is currently displayed, while Blogger's Edit HTML window is like a window within browser window.


Now if you watch my picture carefully, what you really need is to pop that little Search box on the upper right corner before you can search for that post-body or line-height stuff. And no, it doesn't come out just like that. Even my husband didn't know how in the first place until he tried some keys and it suddenly pop out.

We had to track back few times to find what keys was that, and when we found out it was another Ctrl+F within the code window, all my troubles swept away *thanks Hun :*.

So, according to what I had gone through, the more detailed steps are:
  1. Go to Dashboard.
  2. Find Template in your left navigation links. (Yes, it wasn't Design. I don't know when they changed it into Template).
  3. Click Edit HTML to pop that big window of codes.
  4. Click Ctrl+F AFTER you activate the code window. I don't know how to explain this, just click anywhere in the code window :D.
  5. Step 4 should pop you that small Search text-box to find any codes. Put post-body or line-height in. It suppose to look something like this:
  6. .post-body {
      line-height: 2;
    }
  7. Change the number to whatever line height you desire.
  8. Save the template.
  9. Check with your post/refresh your blog to see if it goes right.
Voila! Happy blogging!

4 comments:

Stephanie said...

Thank you!! Yours was the first tutorial I could find that is clear and correct and helped me figure out how to change line spacing :)

Kathie said...

Thank you! I was searching for this info and couldn't find anything helpful.

One thing I need to note - I'm on a Mac, and for that I pressed Command+F, not Control+F, to bring up the search box. Otherwise, your instructions were great.

Unknown said...

Glad to help! Thanks for dropping a line or two Kathie.

Unknown said...

I don't know why your comment doesn't show in the moderated comment section previously, Stephanie. So sorry and thanks for commenting.