Skip to main content

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

Comments

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

    ReplyDelete
  2. nice info tutorial there

    ReplyDelete
  3. 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
  4. 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
  5. 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
  6. 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
  7. The new layouts have no data:post.body tag. So can't do this.

    ReplyDelete
  8. @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
  9. 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
  10. 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
  11. @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
  12. 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
  13. 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
  14. @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
  15. 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
  16. @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
  17. 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

Post a Comment

Comments are moderated very strictly

Popular posts from this blog

Power of Short Sentences

Post dedicated to Thomas Hardy (see History Today below). There are monster sentences like the one you encounter as the first paragraph of Oliver Twist by Charles Dickens . One of my friends, whom I am getting equipped for his IELTS ( what is this? ), told me that the examination recommends long sentences. In writing classes also, I guess it’s longer sentences most tutors promote. But indubitably shorter sentences are more powerful . We will see why. Take a long sentence for instance: Tom Cruise, one of the finest actors in the whole world, is perhaps the most powerful celebrity to exist ever according to Time Magazine, but many people still dispute this fact and point out that there are more powerful and popular actors than Cruise, though they were unsuccessful in providing the total number of fans, who liked the films of those actors. This is a long sentence and it is very confusing . Though it has a logical construction and conveys a meaning, it falters in many occasions and seems

Creative Writing: Crafting Characters With Emotional Appeal in Mind

When you read the greatest fiction works ever, have you ever asked what was so compelling about them that you not only kept reading it, but you ended up reading all other major works of the writer? It may well be because the writer touched your emotional quotient quite a bit. Every reader has a unique taste . Some like to read suspense thrillers , some tender love stories, and some others dark horror and bloodshed stories . That’s why there are all sorts of genres out there. When a writer gives you what exactly you want, you will keep reading. Here we come to the emotional appeal. Character Imperfection Perfect characters may not always be the upshot of a writer’s deliberation. It may well be due to ignorance . Usually the upcoming writers take it for granted that if they create perfect characters, they will be able to garner a bigger audience . It is not true. You have to ask yourself what a character would do in a particular situation. Perfect characters—perfect gunmen, perfect

Another Tiny List of Confusables

Earlier, you may remember we published a list of confusable words . Here we are again, with such a list of words. Abjure/Adjure: Abjure means "to formally renounce (give up) something" such as a position. Adjure on the other hand means 'to appeal to' or 'solemnly order'. The governor decided to abjure his position due to political pressure. Normally, adjuring to the subordinates doesn't give many results. Amount/Number: Use amount when you have uncountable subject. Use number when it is countable. The amount of love one gets depends on the number of friends one has. Appraise/Apprise: Appraise is the word applied to quantitative evaluation of something. Apprise means 'communicate' or 'inform'. Appraising diamonds is the work of an expert. Joe apprised me of the schedule of events. Attorney/Lawyer/Solicitor: These terms are highly misinterpreted and confused by many people. Let me clarify. In the US, an attorney is any member