Expandable Post i.e Display Post Summary hack

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 installationxpasti

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:

<!– JavaScript Posts Summaries –>
<script language=’javascript’ src=’http://www.sigmirror.com/files/16723_kc9lz/jquery-1.2.3.pack.js’ type=’text/javascript’/>
<script language=’javascript’ src=’http://www.sigmirror.com/files/16722_nbdvm/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.sengihnampakgigi

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 </head> tag in your blog template, Find that code i.e written below :-

<script language=’javascript’ src=’http://www.sigmirror.com/files/16722_nbdvm/jquery.extractor.js’ type=’text/javascript’/>

And replace it with this instead:

<script language=’javascript’ src=’http://www.sigmirror.com/files/16742_fgkbf/jquery.expander.js’ type=’text/javascript’/>

I have only edited extractor.js to expander.js

Please Upload these scripts to your server and change the script links to yours as mine might not work because of exceeded bandwidth problems of my sever.

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 ypu are redirected to blo 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 HAckencem

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.
Source :- Blogger Buster

31 Comments

  1. Sofhal Jamil October 21, 2008
  2. Anshul October 22, 2008
  3. FreebieLover October 22, 2008
  4. wolverine October 23, 2008
  5. Anshul October 23, 2008
  6. Richmond February 16, 2009
  7. Tomaz Vorsic March 16, 2009
  8. ANdyStorm March 30, 2009
  9. RAF April 11, 2009
  10. Anshul April 11, 2009
  11. Me April 11, 2009
  12. mediarasa.blogspot April 11, 2009
  13. Michael A. Schrader April 24, 2009
  14. Anshul April 24, 2009
  15. Edwin May 13, 2009
  16. Anshul May 14, 2009
  17. Anshul May 18, 2009
  18. SQT May 22, 2009
  19. Anshul May 23, 2009
  20. qinkqonk.com July 22, 2009
  21. decogzz March 1, 2010
  22. Anshul March 2, 2010
  23. decogzz March 4, 2010
  24. Somewhere in between... April 9, 2010
  25. url cheers! April 20, 2010
  26. veryn June 16, 2010
  27. Hamza Malik August 29, 2010
  28. Anshul August 30, 2010

Leave a Reply