Tuesday, May 02, 2006

Blogger (classic template) Expandable Post Summary

UPDATE: 22 July 2008: For New Blogger XML template, refer to Expandable post summary for New Blogger.

UPDATE 2: Blogger has implemented expandable post summary which they call JUMP BREAK. More details at Blogger Buzz: You might as well jump

What is Expandable Post Summary?

You may be in the habit of creating long posts, and your readers have to scroll and scroll to get to the next post in the main or archive section. You don't want that. You want only to have the first few lines of the post visible, followed by a READ MORE hyperlink that takes you to the full post. That is expandable post summary.

How to do expandable post summary for Blogger

First, you have to ensure that you have POST PAGE enabled. Go to SETTINGS > ARCHIVING and make sure that ENABLE POST PAGES? is set to YES. Then paste the following codes into your CSS (Cascading Style Sheet. It will be the section between the <style> and the </style> tags in beginning of your template.) (Important note: It is always advisable to backup the template before you do any modification to it.)

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

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


Then add the following codes in the template just after the <$BlogItemBody$> tag

<MainOrArchivePage><br />
<a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>


You can replace the anchor text Read more! with Read the rest of the post... or whatever you fancy.

The next thing you have to do is to place some pieces of codes in your post. Put the tag <span class="fullpost"> at the spot where you want your long post to be truncated, then type in the rest of the post. At the end of the post, add the tag </span>. Thus your post may be typed as follows:

This is the beginning of a long post, which is truncated here. <span class="fullpost"> This is the rest of the long, long post. </span>

If you don't want to have to type in the codes by hand each time you do a post, you can add the codes in the post template by going to SETTINGS > FORMATTING and at the bottom of the page, in the POST TEMPLATE box, add in the codes <span class="fullpost"></span>. Just make sure that the text are typed in the proper place.

24 comments:

  1. The problem I have with this solution is that the 'read more' link is also shown on short postings where there is nothing more to read. Is there a way to do away with them in those cases?

    ReplyDelete
  2. thank you. This is a very good fix. Clearly explained.

    ReplyDelete
  3. This doesn't seem to work for me. When I complete all the steps my posts are completely hidden. Neither the post or the title is shown and the only way to view is to check the archives.

    ReplyDelete
  4. Hi Homeless_homo,

    When I have the time I will test it again and if it doen't work, then perhaps I will have to save it as draft until I find a way that will. However, with the New Blogger, there is less incentive to do it. You can migrate to a new Blogger template
    Migrating an old classic template to the New Blogger template, then use this:
    Expandable post summary for New Blogger.

    It is better to use New Blogger templates for your blogs.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  5. I'm sorry Peter I messed up when Editing the HTML.

    I didn't know there were two data:post.body tags so I was putting the code after the first one instead of the second one.

    ReplyDelete
  6. Hi, Peter,
    I'm using classic template for my Beta blog. I have done the steps, but the 'read more' words appear below the Label, not right after the sentence that I cut. What did I do wrong?

    ReplyDelete
  7. Oh, sorry, my question is for my www.mum-me.blogspot.com
    Thanks.

    ReplyDelete
  8. Hi Mariskova,

    As you already know, this hack is for classic template. I have migrated all except one of my blogs to the New Blogger template, and I am seriously thinking of migrating the last one to New Blogger template. Do you have any special reasons for not wanting to migrate to the New Blogger template. Doing a lot of things are much easier and more and more stuff are coming for the New Bloggr. If you don't know that already, there are 2 hacks for post summary for New Blogger:
    Expandable post summary for New Blogger

    Testing Hackosphere peekaboo expandable post summary for New Bloggr.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  9. Hi Mariskova,

    "Oh, sorry, my question is for my www.mum-me.blogspot.com Thanks."

    That appear to be still using old classic template and my comments above still apply. Why don't you migrate to the New Blogger template? Plenty of templates to chose from now:

    New Blogger template modified by Stavanger
    Dots New Blogger template with Header
    New Blogger templates modified by Ramani
    New Blogger templates by Isnaini
    New Blogger templates by Thur
    Ramani's New Blogger Neo template
    New Blogger template by Final Sense

    Peter (Blog*Star 2006 and 2007)
    Blogger for Dummies

    ReplyDelete
  10. Thanks, Peter, for responding so soon.

    Yes, I used the old template. No particular reason; I just happened to like the layout, that's all. I'll try to do your steps again, and see what happens. If that won't work too, I'll definitely change the template. Again, thanks!

    ReplyDelete
  11. I have the same problem as jan m meijer....the hack works great, except that "read more" appears after every post...Is there a way to fix?

    ReplyDelete
  12. Hi Lexi,

    As I have mentioned in my earlier comments, this hack is for the old classic template. Are you using that or the New Blogger template. If the later, then you will have to refer to Expandable post summary for New Blogger.

    You didn't explain your question fully but I am guessing you are complaining that the "Read more..." also appear for short posts. I do remember making a an update for that and that is to either add a note "End of post" or to refer to Testing Hackosphere peekaboo expandable post summary.

    Peter (Blog*Star 2006 and 2007)
    Earning Online

    ReplyDelete
  13. Hi Peter. There's a little different in my template: you said < style > and < /style > but I'd found < style type="text/css" >/* (sorry I hit a space before and after style). Then I'd done everything you explained here. The 'read more' appeared in the end of each post. What should I do?

    ReplyDelete
  14. Hi wyd,

    Unfortunately each template is a bit different from the other and it is not possible to cover them all. A lady from Argentina had about the same problem, couldn't find the script I posted. She asked me to do it for her, but she paid me for it.

    Peter (Enviroman)
    Peter Blog*Star
    Blogger FAQ

    ReplyDelete
  15. I use Classic Blogger for two of my blogs. For me, used to old HTML, they're easier to work with. New Blogger never seems to look the way I want or have the ease of use I have in Classic.

    Anyway, I used your hack on one of them and it works great! I figured, "How many < style > elements can there be, and started pasting after I found the first one. For the second place I used the ctrl+f you suggested and it works! Cool Beans!

    Many thanks!

    ReplyDelete
  16. How do you create a Expandable Post Summary on a New Blogger Template?

    ReplyDelete
  17. hi Peter..
    I have a question and I haven't been able to find a solution on this. I am currently using Fullpost (read more), however I want to setup my blog as a small image with a short description and then click on read more.
    Once I click on read more, is there anyway to ENLARGE THE IMAGE.

    http://www.honeywhatscooking.com

    See how big the images are. I want to make them smaller so the page renders faster. But once i click on Readmore i want the original size of the image.

    Please advise..

    Thanks..
    Nisha (Honey What's COoking)

    ReplyDelete
  18. What is the problem? I clicked on the picture at Strawberry Banana Smoothie and it open to a larger image at Picture 035.

    You want an introduction page for people to click to enter the blog?
    Only an "imitation introduction page" can be made if you set the blog to display only 1 post with that clickable image and you will have to keep resetting the date and time so that it is always the latest post. Post dating no longer works because Blogger now schedule postdated post to publish in the future.

    ReplyDelete
  19. Hi Peter..

    This is the issue... when someone clicks on a label, say Appetizers, i want a listing of all the appetizers under..
    http://www.honeywhatscooking.com/search/label/Appetizers

    I want a thumbnail image to show up, with the recipe title, and a 4 line description.
    then the next appetizer.

    Right now all the posts show up with the big images, i want it to look more like a recipe index.

    Is this possible to do?

    Thanks
    Nisha

    ReplyDelete
  20. Sorry still don't understand exactly what you want but perhaps an extension to How to create composite photo (many thumbnail combined into 1 composite image) may give you your solution.

    ReplyDelete
  21. Hi Peter,

    Long time no see. I have been using expandable posts summary according to your instructions for years trouble free. Except maybe a couple of times I get some kind of error in my html code that leaves this enormous space between the end of the short post and the READ MORE script. I tried re posting and it did no good. Where did I go wrong? This has only happened twice to me. Thanks in advance.

    ReplyDelete
  22. Blogger now has the Readmore... which is Blogger.com's name for their expandable post summary. Why don't you use that instead?

    ReplyDelete
  23. Help Me !!!
    Script Auto Readmore With Thumbnail Image For Bloggeer Template Classic

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics