how to // changing the line-spacing

Okay, if you have a mouse or a touch pad or really anything that isn't a touch screen, then highlight these words right here, the ones that you're currently reading and (I hope) highlighting.

Highlighting is pushing down on our mouse/touch pad thing and moving the cursor along the line that you are reading. If you didn't know that, there's a whole you gotta learn before you start trying to change your blog in any small, slight way.

But those of you who know how to highlight, keep going.



Since you stopped highlighting to click on the "read more", this is a reminder to take that back up. Now that you've probably done that, look in between the highlighted lines. See that white line that should be there? It's right in between the words.
You can stop highlighting, now.

Well that white line right there is what we're going to either remove or widen, so pay up.

Here are the steps, watch closely.
1. Go to the blog desktop thing > Template > Edit HTML (I know, editing HTML does have a tendency to make you/me nervous, but do not worry, it's totally easy and not at all hard to do...me, I was super nervous about editing the HTML until I read what someone had to say on that — the same person I got the tutorial from, actually) but, proceed!
2. Ctrl + F and a little box pops down (or up, depending on whether or not you clicked the HTML box...am I making sense? here's a picture)
So click in the box so that the little blinky line thing pops up, then do Ctrl + F and a box should pop down in the box that had the blinky line. I am totally making this a lot more complicated than it actually is, am I? Well, that's why I've included the google search at the end of this post. ;) Just for max convenience!
3. Insert the following...
 .post-body 
...into the search bar. And then hit "enter". Like so -
Then scroll down, and you'll see a similar code in your own HTML box. If your code is a little bit different, or even totally different, no worries. Instead, try changing your search from ".post-body" to "line-height" and you'll find it, I'm sure. If you don't, try contacting me and telling me about it. For those of you who are waiting, this is the code you will hopefully see when you scroll down:
look for the red box. Mine I've changed to 1.22, but if you want your white line in between the highlighted part to be bigger, change it to 1.3 or 1.4, and if you want the white line smaller or even gone, change it to 1.2 or 1.1...different templates will be different sizes. For example, what would be big on here could be minuscule on a different template.

Anyway, try it out, dabble with it a little bit, you can't go wrong! ...but always keep track of what the number is that you started with -- that way, if you decide that you liked what you began with, you can always go back to what you used to have.

One last thing -- if you want to be more specific, you can add a second digit so that instead of it just being 1.2, it's 1.22... you can be much more precise if you add another digit. But try not to get past two, because it can get confusing. The only reason you might want to do this is because on some templates, 1.2 looks like this
while 1.22 looks like this
see the difference? Instead of the white line being inconsistent, you get it to where it's always thin or always thick or, in some cases, always gone. ;)

Note: if you want your line spacing to look like picture #2, but be consistent even within big paragraphs (bc Blogger's kind of funky that way - the bigger the paragraph, the less consistent the line-spacing), I've found that the best way to program it is to make it 1.256 - it's the most consistent of the ones I've tried. I know I said not to get past two but that one was just so specific and works so well I thought I might as well give it to you in case you wanted it.

So, that's that! Sorry I didn't post on Tuesday...I was (still am!) sick, and never got around to it because my eyes were so watery that staring at the screen for more than five seconds made me cry.

Here's to a fantastic blog!

Google search: "editing line spacing on blogger" (extra word: "html")

New posts every Tuesday! Try it out and tell us about it.

No comments:

Post a Comment

keep it simple, keep it clean, and keep it on one idea! Comments that don't follow these instructions will be removed immediately. Click here to learn how to insert boldface, italics, and links into your blogger comment.