Monday, August 08, 2005

flexible 'Read More' for long post

A 'Read More' link for long article, actually is already provided by Blogger in expandable post help topic. It's a useful thing to avoid reader's bad mood for seeing such a long post. But the conditional tags from Blogger is not flexible that the 'Read More' link will appear in all posts. So I make a modification to make it only appears in the post we want... Read more!

First, to activate this feature you must enable your post pages setting.

Second, go to your 'Template' editor and add the following style sheet (CSS) code:

<MainOrArchivePage>
  span.fullpost {display:none;}
  span.readmore {display:inline;}
</MainOrArchivePage>

<ItemPage>
  span.fullpost {display:inline;}
  span.readmore {display:none;}
</ItemPage>


Put the code between <style> and </style> tags. If you have your style sheet in a separate file, you'll still need to add these lines in your template, so the conditional tags will work. Save and 'Republish' your entire blog.

Third, you must make a modification in your each post you want the 'Read More' link appears. Insert the following code to the starting sentence/paragraph which you want to 'hide' in the rest of the article:

<span class="readmore"><a href="your post page link address">Read more!</a></span><span class="fullpost">

Then, also don't forget to put:

</span>

at the very end of your post.

IMPORTANT: Since the 'Read More' link here is very specific compared with Blogger's script, you must know first your post page link address. Blogger usually give the name of each post with the pattern:

http://yourbloggerid.blogspot.com/year/month/title-of-your-post.html

yourbloggerid.blogspot.com: your Blogspot address
year: the year you write the post.
month: the month you write the post.
title-of-your-post.html: the HTML page name of your post, Blogger usually creates it based on the title of your post, separated with dash (-) instead of space or other punctuation marks.

You can also publish your post first to know the link of the post page address, then insert this 'Read More' tags later.

Make sure when you make modification of your 'Template' or your post to always make a backup. Just copy and paste all your code or article to a text file on your hard drive, so you'll have it there as a replacement in case anything goes wrong.
----------

Since the 'Read More' feature here is just to show/hide the rest of the text, the whole content of the post actually is still loaded when the reader open the index page or archive page. So, please don't think it will speed up your blog loading time ;)

3 comments:

Anonymous said...

Blog Study Says: Blogs = Good Audience
This is not a surprise, but Comscore, backed by Gawker and Six Apart, reports that those who read blogs are wealthier, younger, and probably thinner than the rest of the world.
Great! You've made a real effort!
I have a Wedding Photography Northampton site/blog. It pretty much covers Wedding Photography Northampton related stuff. Check it out if you get time :-)

Primadonna Angela said...

but i love long posts.... ^_^;

Eyes said...

This is great code, but every now and again it bugs out on me and I can't get it to work.

Could you take a look at my latest blog post and maybe give me some insight as to why?

I would be so grateful!

Eyes