Tuesday, September 15, 2009

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: insert jump break. 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:

Read more, default

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 ...

post page link text

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:

edit template jump-link

(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.

Read More link, formatted

11 comments:

Mo said...

Hello. My teacher uses your book as a textbook and that's how I eventually got to your page. However, I'm unable to scroll down to the rest of your sidebar links (still using a 1024x768...XD)

Actually I may look at your Blogger book as well (will you be creating other books for blogs?) Although, customization shouldn't be a problem once I learn CSS so I should be eventually figuring out that too.

In addition, I will be looking at your other books.

rcjhawk said...

Thank you, thank you, thank you. I've already put this into my blog.

Just a couple of comments: If you use a third-party Blogger template, as I do, it's necessary to modify the template a little bit. Blogger Help has the details:

* Edit the template

* Expand the widgets

* Look for <data:post.body/>

* Add this code:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >

Second: Blogger claimed not to know about $postfooterfont . I don't know if this is the fault of the third-party template, of if I turned something off at some time.

Liz Castro said...

Thanks, rcjhawk! Very helpful.

in the vanguard said...

Liz, I was wondering if these continuing upgrades to blogger will make it more difficult for me to save my blog entries in my backup text file. As of now, for every post, I copy the HTML view's text into my backup file, and add to it my title. But with all these new features, will that hurt this simple backup process I take precaution to do?

Liz Castro said...

@at the edge: No, it shouldn't affect that at all. However, one of the upgrades a while back was automating the backup process... all you have to do is go to the Settings | Basic page and choose "Export Blog" up there at the top next to Blog Tools. It will create an XML file with all of your entries and comments, and you won't have to paste the titles in.

You can find more info here: http://www.google.com/support/blogger/bin/answer.py?hl=en&answer=97416

amin said...

HI,Dear Liz
about 5 days ago i went to book-showplace and i was looking for a book about html and i saw ur book and bought it in home when i read ur book i wondered about how it's easy and how it's cognizable and
how it useful ..if want add me(amin_jalili2008@yahoo.com)
i know u busy but if want add me
sorry me
bye Dear

amin said...

hi dear
how can i communicate u ?
bye

Liz Castro said...

@amin: you just did! What do you need?

l3reak said...

Sweet, this is exactly what I was looking for! That read more link totally bleeds into the background which makes it not at all apparent that there may be more to the post that can somehow be accessed.

Carla Gade said...

Great help. Thanks. You have such an easy way of explaining things. I've been using your books to teach adult education classes on web design and they've been excellent!

PsychoSherry said...

i love you! ilove you!!! you are awesome!! this was a main problem for me and now its resolved!!! Thank you so much!!!!

My Books