Formatting Blogger's Read More

As part of Blogger's 10th anniversary celebration, they announced last week that they had added an easy Read More feature to their popular blogging software. The Read More feature (also called a jump break) lets you limit the amount of a long post that will appear on your main page, and offers a link to the rest of your post for those who want to, well, read more. The Read More feature lets your visitors see the beginnings of several different posts at once instead of having to scroll through very long posts to see what else there is.

Using the Read More feature is really easy. First, make sure you're using the new Compose tab, as I described in Blogger's new post editor last month. Then, place your cursor in your 
post at the point where you want the break to occur. Then click the Insert jump break icon: . A gray line marks the break. (If you're using the Edit HTML tab, you can also type <!-- more --> where you want the break to occur.)

When you publish your post, only the part before the break will appear on summary pages (like your home page, or a particular month's page), but the entire post will appear on the post's individual page.

You could have figured that out on your own.

What I want to tell you about is how to format the Read more » text that Blogger displays by default so that your readers know there's something more to your post. I think it gets a little lost:



To change the text itself, or that little guillemet at the end, go to the Layout | Page Elements page, click the Edit link in the Blog Posts area, and at the top of the Configure Blog Posts box that appears, type the desired text in the Post page link text box. In this example, I used ... continued ...



This is a little better:



But I really want the text to stand out a bit more and I want it right where the reader's eye rests when they come to the end of the part of the post that is visible: on the right.

To change how the text is formatted requires a trip to the template and some fussing with HTML and CSS. Start by going to Layout | Edit HTML.

The 'Read More' text is styled by the jump-link class, so all you have to do is create new style rules for that class:



(You can find a full explanation of CSS rules and selectors in my HTML, XHTML, and CSS, 6th Edition, Visual QuickStart Guide.)

Notice that I specified the font with the $postfooterfont variable, so that in case I change the fonts for my template, the Read more text will automatically reflect that change.

Next, I used a larger font size, aligned the text to the right, and took away the italics.

I like it much better.