TrickSmart | SmartTrick

I think many blogger have already know this trick, to make "expandable post summaries".
But here, I'll provide a cool ReadMe style that can expand and collapse fastly without having to load another page.

Okey, now I'll explain how to make it. Hopefully you understand my word. :)

1. Login into your blogger account
2. Choose menu Layout > Edit HTML
3. Before continuing, I advise you to first backup your template by downloading your complete template.
   
4. Mark the Expand Template Widget checkbox
5. Now, copy the following JavaScript code into your template HTML code just right before/above the </head> tags
   

   <script src='http://www.geocities.com/kendhin_x/blog/Readmore.js'
   type='text/javascript'/>

6. Search HTML tags below inside your template window
   

   <div class='post-body entry-content'>

   
   or any <div> tag just right before the following tags:
   

   <p><data:post.body/></p>

   in case of my blog's template, the tag are like these:
   

   <div class='entry'>
   <p><data:post.body/></p>
   

7. Change that tags (the <div> tag) so it become like this:
   

   <div class='post-body entry-content' expr:id='"post-" + data:post.id'>
   <b:if cond='data:blog.pageType == "item"'>
   

   
   or in case of my blog's template, looks like this:
   

   <div class='entry' expr:id='"post-" + data:post.id'>
   <b:if cond='data:blog.pageType == "item"'>
   

8. Now add some other code just below the
   <p><data:post.body/></p> tags
   it will look like this:
   

   <p><data:post.body/></p>
   <b:else/>
   <style>#fullpost {display:none;}</style>
   <p><data:post.body/></p>
   <span id='showlink'>
   <p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
   </span>
   <span id='hidelink' style='display:none'>
   <p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
   </span>
   <script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
   </b:if>

9. If you follow the steps from number 1-8, the whole code will look like below:
   

   <div class='post-body entry-content' expr:id='"post-" + data:post.id'>
   <b:if cond='data:blog.pageType == "item"'>
   <p><data:post.body/></p>
   
   <b:else/>
   <style>#fullpost {display:none;}</style>
   <p><data:post.body/></p>
   <span id='showlink'>
   <p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
   </span>
   <span id='hidelink' style='display:none'>
   <p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Ringkasan...</a></p>
   </span>
   <script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
   </b:if>

   
   or in case of my blog's template, look like this:
   

   <div class='entry' expr:id='"post-" + data:post.id'>
   <b:if cond='data:blog.pageType == "item"'>
   <p><data:post.body/></p>
   
   <b:else/>
   <style>#fullpost {display:none;}</style>
   <p><data:post.body/></p>
   <span id='showlink'>
   <p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+] ReadMore...</a></p>
   </span>
   <span id='hidelink' style='display:none'>
   <p><a expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[-] Hide This!</a></p>
   </span>
   <script type='text/javascript'>checkFull("post-" + "<data:post.id/>")</script>
   </b:if>
   

10. Now, save your template
11. Make a post template by going to the Setting>Formatting menu, add the following code into the "Post Template" textbox
    

    <span id="fullpost">
    
    
    </span>

12. Save your setting.
13. Now, if you create new post, the summary post must be placed above
    <span id="fullpost">
    and the rest of your post must be placed below
    <span id="fullpost"> tag.
    
14. Finished!