How to Make Cool "Read More" in

12:23pm January 27th, 2008 By pejantankuda

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.

Want to see quick example? click the '[+]ReadMore...' link at the bottom side of this article !
(And don't forget to get back here...!) :D
How's your opinion? Cool, isn't it?

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

First, just click the ReadMore link below!
  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>

    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>
    <p><data:post.body/></p>
  7. Change that tags (the <div> tag) so it become like this:
    <div 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 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>
    <p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
    </span>
    <span>
    <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 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>
    <p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+/-] Selengkapnya...</a></p>
    </span>
    <span>
    <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 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>
    <p><a expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"' href='javascript:void(0);'>[+] ReadMore...</a></p>
    </span>
    <span>
    <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>


    </span>
  12. Save your setting.
  13. Now, if you create new post, the summary post must be placed above
    <span>
    and the rest of your post must be placed below
    <span> tag.
  14. Finished!
If you still confused, don't hesitate to ask me by commenting this article. :)

No comments | Leave a comment

Number of Trackbacks: 0

Leave a comment