12 Elegant Post Summaries for Blogger with jQuery Thursday, September 4, 2008 /

The ability to display extracts of posts is a feature which many of us would love to see added to Blogger! Such a feature would prevent readers having to scroll far down the page to find the next post on home and archive pages, and in many cases, could offer the potential for different styles of layout...



Many Blogger users have adopted Ramani's selective expandable posts hack or a similar alternative. However, I have found these to be a little complicated: they require manual editing of each post or cause other irritating problems. In my search for an elegant and less cumbersome alternative, I have discovered an almost perfect solution: the jQuery Expander Plugin by Karl Swedberg.









Integrating the jQuery Expander plugin for Blogger offers many useful options and features:

• It can be added easily in only two steps!


• The length (and other options) of excerpts is completely customizable within the blog template (no need to edit JavaScript files!)
  
  


• We could choose to expand posts into the same page (with a smooth transition) or add a "read full post" link to the item page instead.


• HTML tags and complete words are preserved (unlike many forms of Wordpress excerpts)


• There is no requirement for additional tags or editing of posts: it works right away after installation!


• It's possible to use different lengths of extracts for use in magazine style layouts (I'm actually working on such a project right now...)

To see how well the jQuery expander plugin could work in Blogger, take a look at this demonstration in which the posts expand into the same page.

Installation

Depending on the style of post summaries you would prefer to display, the method for installation will be slightly different.



I'll begin with a default explanation which will summarize posts with a link to expand in the same page (this requires only two steps). Next we can make two small changes which prevent expansion and add a link to the post page.



Finally I'll explain how you can alter some options for extracts which can be applied to both methods.



For whichever function you prefer, the installation is simple and the result will be elegant post summaries for your Blogger powered blog :)

Method 1: Expandable post summaries

This is the simplest method to add excerpt functionality to your blogger powered blog!



Firstly, go to Layout>Edit HTML in your Blogger dashboard and check the "expand widget templates" box.



Then, find the closing </head> tag in your blog template, and paste the following section of code immediately before it:

<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: '[...]', // default is 'read more...'

});



});

</script>

Next, find this section of code (or similar) in your template:

    <div class='post-body entry-content'>

      <data:post.body/>

      <div style='clear: both;'/> <!-- clear for photos floats -->

    </div>

If you cannot easily find this section, search for the following tag using your browser's search function:



<data:post.body/>



You need to highlight this and any surrounding code, as in this screenshot:

Replace this section of code with the following instead:

  <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>

Now preview your template. You should now notice that posts on your home page have been summarized and feature an ellipsis at the point of truncation which (once viewed in the live page) is a link to expand/truncate the post:

If you're happy with this, you can save your template and enjoy using your new post summaries right away. Alternatively, read on for methods of preventing the expansion in the same page, and customizing the excerpts to suit your preferences.

Method 2: Excerpts with a link to the post page

My personal preference is to display only an excerpt of posts with a link to the full article. This requires only two small changes to the default installation:

• Use a slightly different jQuery plugin (change the URL)


• Add a "Continue reading" link beneath the excerpts

Assuming you have already added the codes from Method 1, here is what you should do:



1. Find this line in the <head> section of your template:



<script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.expander.js' type='text/javascript'/>



And replace it with this instead:



  <script language='javascript' src='http://halotemplates.s3.amazonaws.com/jquery-truncator/jquery.extractor.js' type='text/javascript'/>



I have highlighted the different file name in bold red so you can see the change at a glance.



2. Next, find the code you have added around the <data:post.body/> section, and add the line in bold red, as shown below:

  <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>

    <a expr:href="data:post.url">Continue Reading</a>

  <b:else/>

    <div class='post-body entry-content'>

      <data:post.body/>

      <div style='clear: both;'/> <!-- clear for photos floats -->

    </div>

</b:if>

Be careful to add this in the correct place, just above the <b:else/> tag, otherwise it will not be displayed!



Now preview your template. The "linked" ellipsis should now be replaced with a plain one, and you should see the "Continue reading" link appear beneath the extract. You could change the link text to anything you prefer (eg: "Read more", "Full Post", etc). Then proceed to save your template.

Post Summary Options

The jQuery plugins used for these methods are almost identical, except that the "extracts" version has the "more" link removed.



Both plugins therefore have identical options which you can set by adding or changing code in your blog template.



The options can be configured within the internal javascript in the head section which by default appears like this:

<script type='text/javascript'>

$(document).ready(function() {



$('.excerpt').expander({

slicePoint: 280, // default is 100

expandText: '[...]', // default is 'read more...'

});



});

</script>

Here are some of the most used options available, and how they can be changed. A full list of options can be found on the expander plugin for jQuery page.

<script type='text/javascript'>

$(document).ready(function() {



  $('.excerpt').expander({

    slicePoint:       280,  // change this to the length in characters you would like to display.

                            // HTML tags included in this count.

    // the folllowing functions apply when choosing the expanding post version

    expandEffect:     'fadeIn', // the effect used for displaying expanded text.

    expandText:         '[...]', // Change this from an ellipsis to "Read More" for example

    userCollapseText: '[^]'  // This is the icon used for truncating the post after it has been expanded.

  });

 

});

</script>

You can add or change any of the lines above as appropriate for your needs.

License, Credits and Download

This function uses the jQuery JavaScript library and the jQuery expander plugin for the base functions.



The Expander Plugin for jQuery was created by Karl Swedberg and is dual licensed under the MIT and GPL licenses.



If you would prefer to host the jQuery scripts on your own server, you can download a zipped folder including all scripts from this tutorial and a basic Minima template in which this function has been added for demonstration or testing purposes. As in the case of the original Expander Plugin and jQuery file, these are provided under the GPL licence.



Download Elegant Blogger Post Summaries Files



I hope you have found this tutorial to be a useful and elegant solution for creating and using post summaries for your Blogger template. Please feel free to leave your comments and any suggestions for improvement below.