How To Create Expandable Post Summaries

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 </head> tag.

<script language='javascript' src='http://pwam.googlecode.com/files/jquery-1.2.3.pack.js' type='text/javascript'/>

<script language='javascript' src='http://pwam.googlecode.com/files/jquery.expander.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {

$(&#39;.excerpt&#39;).expander({
slicePoint: 280, // default is 100
expandText: &#39;[...]&#39;, // default is &#39;read more...&#39;
});

});
</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 != &quot;item&quot;'>
<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.