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.

Sign in to the new Blogger
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
Click Edit HTML
Click Download Full Template in order to make a backup of your template on your hard-disk drive.
Click to check the Expand Widget Templates checkbox
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}
```

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>

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>

Hit SAVE TEMPLATE.
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 Blogger, Blogger Hacks, Blogging