How To Create Expandable Post Summaries

I found this tip in  Amanda Fazani's blog.

1.Log in to your dashboard--> layout- -> Edit HTML 

2.Click on "Expand Widget Templates" 

3.Scroll down to where you see </head> tag.

4.Copy and Paste below 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>

5.Now again, Scroll down to where you see this. 

<div class='post-body entry-content'>   <data:post.body/>   <div style='clear: both;'/> <!-- clear for photos floats -->   </div>

6.Replace above code with the following code.
 

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

7.Click on "Save Templates" and you are done.