HashOut: 2007/06/25

Excluding the first post from Expandable Post Summaries hack for Blogger

In continuation of my earlier post Excluding the first post from a Peek-a-boo style post body contents-hack for Blogger let me show you how to implement this same trick for the Expandable Post Summaries hack for Blogger.

Just like the Peek-a-boo exclusion trick we will use the getElementsByClassName function to fetch the full contents of the first post and make it visible. But before you proceed further you need to have the Expandable Post Summaries Hack already implemented on your blog.


Once you have done that:

  1. Copy and paste the getElementsByClassName JavaScript function between the <head></head> tags.
  2. 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("fullpost")[0].className = "";
    getElementsByClassName("contreadlink")[0].style.display = "none";
    -->
    </script>

  3. Finally add a class to the Continue Reading link so that we can hide the link for the first post.

    Search for this tag:
    <b:if cond='data:post.url'> » <a expr:href='data:post.url' title='Permanent Link'>Continue reading</a></b:if>

    and replace it with
    <b:if cond='data:post.url'><span class="contreadlink"> » <a expr:href='data:post.url' title='Permanent Link'>Continue reading</a></span></b:if>


Thats it, you're done!

If you have a better way to achieve the end result, do let us know.
» Continue reading

Read more on , ,