Expandable Post Summary Hack for Blogger

Expandable Post Summary Hack for Blogger

There are two methods to do it . I am publishing Only one method in this blogger post.
Just follow the following step by step procedures:-
1.Go To Layout > Edit HTML > Expand WIdget Template .
2.Press ctrl +F and search for the closing tag of your blogger template .
3. Paste the follwing HTML Code Just below 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() {  $('.excerpt').expander
({ slicePoint: 450, // default is 100 expandEffect: 'fadeIn', expandText:
'[...]', // default is 'read more...' userCollapseText: '[^]' // default is '
[collapse expanded text]' });  }); </script> <!--
End JavaScript Posts Summaries --> 

Note :- You can change the %age of Post which you want to show by changing the %age out of 1000 which is written in black in the above HTML code (Slice Point:450) , Here 450 is the %age out of 1000.

4. Search for the following code:-

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

And replace it with the following code written in green:-

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

It Must look like this:-

5. Now preview your template , If the work is done you save the template .
6. Your template must look like this:-