Excluding the first post from a Peek-a-boo style post body contents-hack for Blogger

I had earlier written a post on Peek-a-boo post body contents-hack for New Blogger in response to which many asked for a way to exclude the first post from the hack. That is displaying the full contents of the first post alone.

Here I will show you a hack to implement this using JavaScript. If you have not already implemented the hack as given in the previous post, do so first.

Then insert the following lines of JavaScript code anywhere between the <head></head> tags. Preferably add them after the expandcollapse function between the same script tags.

<script type='text/Javascript'>
&lt;!--
function getElementsByClassName(clsName) {
  var retVal = new Array();
  var elements = document.getElementsByTagName("*");
  for(var i = 0;i &lt; elements.length;i++){
    if(elements[i].className.indexOf(" ") >= 0){
      var classes = elements[i].className.split(" ");
      for(var j = 0;j &lt; classes.length;j++){
        if(classes[j] == clsName)
          retVal.push(elements[i]);
      }
    }
    else if(elements[i].className == clsName)
    retVal.push(elements[i]);
  }
  return retVal;
}
-->
</script>

Then search for the posts loop. It should look somewhat like this:

<b:loop values='data:posts' var='post'>
  <b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><data:post.dateHeader/></h2>
  </b:if>
  <b:include data='post' name='post'/>
  <b:if cond='data:blog.pageType == "item"'>
    <b:include data='post' name='comments'/>
  </b:if>
</b:loop>

Now add the following lines of JavaScript code immediately after that.

<script type='text/Javascript'>
&lt;!--
getElementsByClassName("posthidden")[0].className = "postshown";
getElementsByClassName("showhidelink")[0].innerHTML = "";
-->
</script>

And finally we have to make a slight modification to the peek-a-boo hack by adding a showhidelink class to the [+/-] show/hide this post anchor tag.

Search for this tag:

<a expr:href='"javascript:expandcollapse(\"" + data:post.id + "\")"'>

and replace it with

<a class='showhidelink' expr:href='"javascript:expandcollapse(\"" + data:post.id + "\")"'>

Thats it, you're done!

However, for this trick to work, scripting needs to be enabled else the visitor will see the first post hidden just like the previous hack.

This trick can be similarly applied to the Expandable post summaries hack. I shall write about implementing this trick with that hack sometime soon.

I believe a lot can be improved upon this hack too! May be there is a better way to do it. This was just what I came up with. If you have a better solution do hash out!

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

Read more on Blogger, Blogger Hacks, Blogging