Free Games Movie Software Music Ebook Tutorial

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

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>
<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 summarized ellipse below your each post like this in image below.

You can Now save Your template.

Now to Add Read More Link below each Post If You not liked this Expand /Collapse hack.

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

<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 only edited expander.js to extractor.js

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





Now Preview Your template. Posts will Look like this in image below.

Now you can save your Template.

Some Tips.. About it..

1.You can use both read more.. and expnad collapse hack together also.Just use 1st hack and add an extra line of read more in red also to 1st codes as shown above.

2.It works in firefox but sometimes can create working problem in IE.

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