Display Expandable Post i.e Display Post Summary in Blogger

Expandable Post i.e Display Post Summary hack for blogger as, was only available in wordpress but now is available in blogger also and its very easy to expand post. Dispaly Post summary on main page of your blogger is now can be added very easily.

Lets start with its installation

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

Find the closing <"/head"> (without ")

tag in your blog template, and paste the following section of code immediately before it:

<!-- JavaScript Posts Summaries -->
<script language='javascript' src='http://bandofgirls.googlepages.com/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://bandofgirls.googlepages.com/jquery.extractor.js' type='text/javascript'/>

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

$(&#39;.excerpt&#39;).expander({
slicePoint: 450, // default is 100
expandEffect: &#39;fadeIn&#39;,
expandText: &#39;[...]&#39;, // default is &#39;read more...&#39;
userCollapseText: &#39;[^]&#39; // default is &#39;[collapse expanded text]&#39;
});

});
</script>
<!-- End JavaScript Posts Summaries -->

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

Replace this section of code in green 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>
<a expr:href="data:post.url">Read More..</a>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

Now Preview the template you will see Read More... link below your each post like this in image below.

You can Now save Your template.

Now How to add Expand /Collapse hack Link below each Post If You not liked this Read more hack.

Now in the beggining you added the javascript codes before the tag in your blog template, Find that code i.e written below :-

<script language='javascript' src='http://bandofgirls.googlepages.com/jquery.extractor.js' type='text/javascript'/>

And replace it with this instead:

<script language='javascript' src='http://bandofgirls.googlepages.com/jquery.expander.js' type='text/javascript'/>

I have only edited extractor.js to expander.js

Now, find the below codes you have added before while going through this tutorial and delete the line in bold red..

<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">Read More..</a>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

Now Save and View Your blog. Posts will Look like this in image below.

You can click this link to expand or collapse the posts on that page itself without leaving that page as in read more case you are redirected to the blog post link.

Some Tips.. About it..

1.You can use both read more.. and expnad collapse hack together also.Just use second tutorial and dont remove that read more line in red i exlained above and use expander.js script.

2.Its working in all browsers now as it has been fixed but can create problems sometimes if you are using so many scripts in your blog.

3.In the javascript codes you added at top there is a line like this slicePoint: 280.Now you can change that slice point from 100-1000 i.e upto from which % it should put your expand/collapse link or Read More.. link . Enjoy...This HAck

One More Important Tip :-- You can use any image Link instead of showing read more link also just In the codes above in red line written is read more..... just use embeded image link there and save it.

Image will be shown to click and read the post as check it here.

Thanks to http://anshuldudeja.blogspot.com/2008/10/expandable-post-ie-display-post-summary.html.