Elegant Post Summaries for Blogger with jQuery

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 tag in your blog template, and paste the following section of code immediately before it:

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

   

     

     

   

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







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

Replace this section of code with the following instead:

 

   

     

     

   

 

   

     

     

   

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 section of your template:







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.

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.