Peek-a-boo post body contents-hack for New Blogger - HashOut

Peek-a-boo post body contents-hack for New Blogger

The original Blogger hack for show/hide links for posts only deals with the classic template. The same hack can be modified a little to implement it on the new Blogger layout template. Here is the step by step procedure.

Note: Before you proceed with any template modifications, it is always a good idea to take a backup copy of your template so that you are safe just in case you or the Blogger server goofs up.


  1. Sign in to the new Blogger
  2. Click on Layout under the Manage: section of the blog you want to implement this hack on. Or click Template if you are already on Posting or Settings tab
  3. Click Edit HTML
  4. Click Download Full Template in order to make a backup of your template on your hard-disk drive.
  5. Click to check the Expand Widget Templates checkbox
  6. Paste the following two lines into your style sheet i.e. anywhere in between the <b:skin> and </b:skin> tags:

    .posthidden {display:none}
    .postshown {display:inline}

  7. Add the following code to your template, anywhere between the <head> and </head> tags:

    <script type="text/Javascript">

    function expandcollapse(postid) {

    whichpost = document.getElementById(postid);

    if (whichpost.className=="postshown") {
    whichpost.className="posthidden";
    }
    else {
    whichpost.className="postshown";
    }
    }
    </script>

  8. Now search for the following lines in your template:

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

    and replace them with the following lines:

    <span class='posthidden' expr:id='data:post.id'>
    <div class='post-body'>
    <p><data:post.body/></p>
    <div style='clear: both;'/> <!-- clear for photos floats -->
    </div>
    </span>
    <a expr:href='"javascript:expandcollapse(\"" + data:post.id + "\")"'>
    [+/-] show/hide this post</a>

  9. Hit SAVE TEMPLATE.
  10. You're done! Now take a look at your blog.


An alternative to the show/hide method is to use post summaries. Each method has its own advantages and disadvantages. The advantage of this method to expandable post summaries is that only the template needs to change, with no modification required for your posts. However, you can only display the post titles using this method and it is applied to all posts leaving you with no choice to apply it selectively to long posts only.

If you enjoyed this post then Bookmark or Subscribe to HashOut for FREE!

Read more on , ,

3 Comments:

  1. Aziz said...

    Hi Kevin!

    Nice question. I think that would be possible using some client side scripting. I am not sure though. Might need to look into it. Give me some time on it. May be in a fortnight or so!

  2. David said...

    I have the same question as Kevin. hope you find the answer aziz =)

  3. Aziz said...

    Hi Kevin, Shypy!

    Here it is. A trick to exclude the first post from peek-a-boo style post body contents. That is displaying the full contents of the first post on main and archive pages. Hope thats what you wanted.

    http://hashout.blogspot.com/2007/06/excluding-first-post-from-peek-boo.html