Expandable Post Summaries on Blogger

One of my readers, Chris contacted me with a question:

A few days ago, when I checked your blog, it had this cute feature; there were teasers (previews) for each post, with links to expand to the full post. I have a Blogger blog myself, and I would like to implement this feature. Could you post directions for this?

Thanks
Chris
Well, Chris, the standard term for the post teasers is Expandable Post Summaries. In self-hosted blogs, this feature is prevalent and it is also an indication of professional blog design. Or it has been made so by widespread use of this feature in professional blogs. In Blogger blogs, this feature is not available directly from the dashboard. However, a minor Blogger tweak can give you this effect. Though there is official Blogger help for this tweak, it is not rated understandable by most people.

What You Should Know Before You Do This

There is a catch to expandable post summaries, however, which made me get rid of this a few days ago. Through this, though only the summaries are shown to the readers, the whole post is loaded on the browser nonetheless. Hence, if you increase the number of posts shown on homepage to say, 10, all your posts are loaded in browser and will increase your total blog home page size enormously. If you are using long posts with lots of images and other links, like me, then this will negatively affect the blog’s SEO. If you have short posts, then you may well go ahead and do this tweak.

For this tweak, you have to edit three things. First, the blogger layout, the post template, and the post itself.

Tweak Steps

1. Enable Post Pages

First of all, we need to enable post pages in Blogger. For this, go to Settings. Under Archives, set ‘Enable Post Pages’ to Yes.

2. Template Backup

Make sure you back up the whole template. Use Download Template link from the Layout->Edit HTML

3. Expansion Link

[Edit done on 16 Oct 2008: I found there was some problems around the editing of CSS code in Blogger, and here, I am posting a slightly modified way to get post summaries]

Expand the Widget templates by going to Edit HTML and checking Expand Widget Templates check box.

In the HTML code, find this tag: <div class='post-body'> If you don’t find that tag, you may find the tag <div class='post-body entry-content'> After either of these tags, add this code:
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>

Do Not Save Now!

Now, find this tag: <p><data:post.body/></p>. Immediately after this tag, add the following code:
<a expr:href='data:post.url'>Continue Reading...</a>
</b:if>
You can change ‘Continue Reading’ to the text of your choice. Now save the template.

Here is the screenshot:
Expandable Post Summaries screenshot of template editing

4. Modify the Post Template

Now you can edit the post template within new Blogger. Go to Settings->Formatting. Within the text area beneath Post Template, add this code:
<span class="fullpost"></span>
Now this code will appear on your Blogger post editor. When editing your new posts, see if this code appears in the code editor in HTML view. If not, add it manually (recently, I found it is not appearing in my post editor).

5. Post Editor

Now, whenever you start a new blog post, you will see the above code already there (check the post HTML view). Add your post summary above this code and add the rest of the post right before the </span> tag. Like this:

Here is the summary of this post

<span class="fullpost">

Here is the complete post, which will not be seen normally.

</span>

Edit all your internal blog posts to reflect these changes, and you will see only summaries when you visit the blog’s home page or archived category pages. You will have the link to expand to full post, which you can use to get to the full post page.

Conclusion

Hope it helped. There is another way to expand the posts, which uses JavaScript. In another article, to be published soon, we will discuss how to do that. The advantage of JavaScript is that it will promptly expand the posts. One click, and there is no reloading, the full post is promptly shown, with a contract link at the bottom, which on click shows the summary promptly.

However, there is an advantage on using the normal way of expansion. Your blog’s average bounce rate will be greatly reduced. Since each click to expand and read the post is considered as a second pageview, almost all visitors will have two or more pageviews.

Related Entries:

A Better Way to Post on Blogger Keeping W3C Rules
Expandable Post Summaries Using JavaScript

Copyright © Lenin Nair 2008

17 Opinions:

  1. Thanks to very informative posting. Can you please teach me how to add contact form.

    ReplyDelete
  2. hello Lenin
    I use the expandable posts with blogger and it's great..
    I've subscribed in my google reader and dugg this post :)
    cheers Kim

    ReplyDelete
  3. I feel so inadequate! I tried following the instruction, but no joy :-(

    with "new blogger" i get "read more" links after every post on the index page, regardless of class="fullpost" tag.
    Even when I don't have that tag at all!

    Wordpress has this simple function built into the editor's tool bar -- why is this so intricate!!!???

    ReplyDelete
  4. Anonymous,

    I have made changes to the post. You are right that it had some slight errors in the CSS edit. Also, with new changes on Blogger, it was not quite working. Read it now, and do as said. I have tested it and seems just fine.

    If you have doubts, let me know.

    Lenin

    ReplyDelete
  5. Hi,

    I have added to this step by creating named anchors so that clicking the Read More link will jump to after the summary instead of starting at the top of the page.

    http://chezannies.blogspot.com/2008/03/hacking-blogger-to-add-expandable-post_21.html

    ReplyDelete
  6. The new layouts have no data:post.body tag. So can't do this.

    ReplyDelete
  7. @Michael

    Hi Michael, thanks for the comment. However, I don't think every blogger template lacks it. It is a basic Blogger code that should be there in any new template. In my template, which is also new, the tag is there. I went through your blogs, and all of the templates you use are normal Blogger templates. So you should find this. The tag may be included in <p> and </p> tags as in:

    <p><data:post.body/></p>

    Let me know if you have trouble with it.

    Lenin

    ReplyDelete
  8. Whenever I do this(and I've tried about 20 times now) all my posts disappear. It just shows my title and the things on the side and my ads. Every single post disappears. Any tips?

    ReplyDelete
  9. I know about it. I have seen it done. But follow the guidelines very carefully. If you are not putting a summary above the post editor's HTML view's <span class="fullpost"> tag, your post's summary won't appear at all. You shouldn't put everything above/below this code, only the summary above and the rest below. I think that should fix it. If not, let me know by contact form and we can try fixing it.

    ReplyDelete
  10. @confusion..had the same problem, save the changes to your html template, then uncheck the expand widget templates box, then your posts will show up.

    I'm getting all of the images on my home blog page with the span tags in place, not showing one image, which is what i'm trying to achieve. Also the "continue reading shows up to the right of some of the images, i would like to have this consistent so it is placed underneath the photo.

    one last thing, is there a way to edit an individual post so it doesn't have "continue reading"?

    Let me know.

    ReplyDelete
  11. figured out the one photo post to multiple on the next page. Still wondering about fixing the text "continue reading" to the bottom of the photo and if it's possible to not have this text on every post.

    ReplyDelete
  12. Hi, i hope someone can help me with this... I have enabled this feature and all the code is working fine BUT i don't want READ MORE on every post. I only want to use this on some posts. So I do i do this so i enable it for each post... not for all posts. I don't want "Read more" or whatever on the bottom of every post.

    Thanks!
    Ann

    ReplyDelete
  13. @Ann: Sorry, but in Blogger this is not possible. A lot of things are not possible in Blogger as it doesn't give us permission to see the actual code and any way to modify it. If you are using WordPress, I guess it can be done with some plugin.

    ReplyDelete
  14. Hello, i've been trying this for quite a while,and something goes wrong every time. There's no < p 's on either side of the data:post.body. Also, when i've tried before, there have been 3 possible results:

    1- i couldn't even save it because it said that i was missing a > somewhere.

    2- It seems like at last it works, but when i click 'read more', nothing happens and says void; javascript:(0) or something along those lines in the bottom left corner. (sorry i don't know my terminology, but i'm good at following directions.)

    3-lastly, one time it was working perfectly- except on all of my previous posts it had "read more" at the end, even if i went and deleted it from the post template.

    This has been driving me insane, please help!

    ReplyDelete
  15. @Breathebreakcore: Thanks for the comment. It's hard to believe you couldn't get it right. If you don't find the p tag around data:post.body, don't worry. Put the code around data:post.body, don't worry about p tag at all.

    The post assumes readers have a fair enough working knowledge of HTML coding. If you are too much a newbie, please seek help from anyone with some knowledge of editing web pages. Hope it will help.

    ReplyDelete
  16. Hello Lenin,

    I have tried a few different versions of this 'post summary' approach, but all seem to have one problem. They don't work if the contents within the 'span' elements have list elements like (ul or ol). It works for posts that don't have lists.

    Have you seen this problem? Is there any way to fix it?

    Thanks.

    ReplyDelete

Comments are moderated very strictly