Thursday, October 23, 2008

jQuery Expandable Post Summary

This expandable post summary uses jQuery which is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML (Wikipedia. You do not need to understand what that means, only to be able to follow instructions in order to implement it for your blog. If you want an easier way, you can use the 4 column Minima template with jQuery expandable post summary pre-installed. You don't have to do anything, just backup current template and backup Gadgets which can be backed up, then replace the template with the one in 4 column Minima template with jQuery expandable post summary pre-installed.

The advantage of jQuery Expandable Post Summary is that it is an easy ONE TIME 2 step easy edit of the template and the job is done. Nothing else need to be done. No fiddling with the post needed. Disadvantage I discovered is that you can't have too many gadgets and a slow downloading blog, otherwise it will initially display the full post and only display the truncated post summary after all the gadgets is fully downloaded.

You can see a demonstration of a blog with jQuery expandable post summary at Holidays and festivals. Please note that if you have too many gadgets like in Home Improvements or Careers, the full posts will initially be displayed and only after all the Gadgets are completely downloaded will you see the posts truncated to short summaries followed by a [Read More...] link.

Now to the implementation (This is a variation to the excellent description by Amanda of Elegant post summary with jQuery: You are reminded to backup current template and backup gadgets (Page Elements). Now go to LAYOUT > EDIT HTML and [v] Expand Widget Templates. When the template had been fully expanded, look for </head> and paste this script just before the </head> tag:

<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {

$('.excerpt').expander({
slicePoint: 280, // default is 100
expandText: '[Read More...]', // default is 'read more...'
});

});
</script>


Note that you are free to edit the part in red. For example, instead of [Read More...], you can edit it to [Expand post...] or something similar. The second part in red, 280, is to control how big is the summary. If you want the summary to display more, you may edit it to 400 and if you want to make the summary shorter, you may edit it to 100 etc.

Now after having done that, look for
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>


Delete all of that (highlight all and press DELETE key) and replace it with

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>


Preview and if satisfied, save template. You may follow the above instructions or use the pre-edited template at 4 column Minima template with jQuery expandable post summary pre-installed.

Related posts

If you want to have a lot of gadgets in your blog, perhaps it is better to use the less sophisticated expandable post summary where you have to add some HTML tags in the post itself but which will show the truncated post summary immediately without having to wait for all the gadgets to be fully downloaded.

Peter Chen's nice graphic signature

21 comments:

  1. where is your favicon?
    yesterday i think i still saw it,
    now, there is no more.

    mine got reset to normal blogger favicon too..

    why?

    ReplyDelete
  2. Probably the host is down. It happened with the previous one Favicon for Blogger. The host is a Philippine website. I think they were not making money so must have given up and shut the site. It could be history repeating itself. Looks like we have to find a new host. That is the problem when you don't host your own blog. You have to depend on others.

    ReplyDelete
  3. After I expand my post, the word "undefined" is right before the rest of my entry. How do I get rid of undefined?

    ReplyDelete
  4. I don't have that problem and I frankly do not know for sure how to solve your problem, however I suspect it could have something in your gadget or in the template itself.

    When I get a problem like this, what I may try is to first backup template and backup Gadget, then change to a standard Blogger template to get rid of stuff in the template. If that still don't work, then get rid of any leftover gadgets and then try again. That was how I solved the troublesome error code bX-jdokxi.

    Please note that advice is given in good faith and no guarantee that it will work but it has worked for me in a couple of circumstances where real solutions are unknown.

    ReplyDelete
  5. Peter, this was great! And with easy, clear instructions -- Thank you so much.

    ReplyDelete
  6. Thank you so much for your blogging help! Your instructions are VERY easy to follow! I did the expandable post summary and it worked very well with one exception. The 14th post did not work and I can't find out why. Can it be fixed?
    friedalovesbread@blogspot.com

    ReplyDelete
  7. Thanks for your tip on expandable posts...it worked wonderfully!

    ReplyDelete
  8. Thanks so much!

    The only problem is that I also have the "undefined" word. Any idea how to get rid of it?

    ReplyDelete
  9. Sorry, don't understand. What is this "undefined word"?

    ReplyDelete
  10. Hi Peter - just followed your instructions to the letter and its working great in Firefox but in IE 7 I am getting a javascript error "expected identifier, string or number" - any ideas? Thanks

    ReplyDelete
  11. I can't remember if I had tested it with IE7 before publishing this post, but it looks like you are right. I opened Best home improvement and Holidays, vacations, festivals with IE7 and both didn't show the truncated post summary

    ReplyDelete
  12. The Undefined happens like this:

    sample word: simple(the expandable hack ends with this word.)

    When you expand it, it goes like this:
    ...simundefinedple......

    pretty confusing.... hope you can help

    ReplyDelete
  13. Perhaps you made some mistakes. Probably changing over to a 4 column template with pre-installed expandable post summary may help. If you go this route, do remember to backup gadgets and backup template.

    ReplyDelete
  14. I too have the 'undefined' error. After I expand my post it says 'undefined' in place of the original expanding link.

    If use
    (a class="read-more" href="#")Click to read story(/a)(span class="details")
    in my posts [with < and > instead of ( and )] I don't get the error any more. But I do get a few other annoying problems and defeat the point of this great plugin. Although a number of people seem to have this problem, no one seems to have figured it out.

    ReplyDelete
  15. I'm having the same problem with the "undefined" word being placed at the start of the expanded text. Tried switching to a simple Blogger template and then back but the problem persists.

    Any assistance would be greatly welcomed!

    ReplyDelete
  16. The "undefined" problem persists. Everyone's got it, including me, but no one's got a solution.

    ReplyDelete
  17. Hi Peter - is there anything that would encourage you to get this solution working for IE7? I definitely prefer this solution to the CSS one, but there are still a lot of people using IE7. Thanks

    ReplyDelete
  18. I found a possible solution at If I Ran the Zoo. There is JavaScript right after < head >.

    There are different home pages it looks like. I've seen # and #0 appear at the end of the URL. I don't know enough to try it myself, but I thought you might check it out, Peter.

    Thanks for your efforts, great ideas!

    ReplyDelete
  19. Well, I was hoping you could look at the source code and figure out directions for implementing the expandable post method this site is using:
    http://tehipitetom.blogspot.com/

    The post from Tuesday has a More link at the bottom. Clicking it produces more text right there on the main page. A Hide link erases it. It is a little quirky, sometimes you have to click twice. And the individual post page is a bit worse, I've clicked several times to get the expanded text to appear.

    Does that help?

    ReplyDelete
  20. Its not working, tell me other options

    ReplyDelete
  21. Blogger now has its own version, Blogger version of expandable post summary - jump break. It may already be enabled for the template and where you want the jump break, in the COMPOSE mode all you need to do is to click an icon in the menu bar. I myself usually prefer to use EDIT HTML mode in which case I will type <!-- more --> where I want the break.

    If you need further help ask again and push me to do a long delayed post.

    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