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.