Expandable posts with the new Blogger

Update: Thanks for visiting my blog. You landed here because you were looking for a way to have expandable posts. This entry, however, is five years old. It still works, though, so if you want to do it this way, you can. However, it may be better to just use the <!-- more --> tag. This adds a break in your post that does quite the same thing.

I've just managed to reinstate the expandable posts using the new Blogger template. The method is quite similar to the old Blogger. However, owing to the somewhat complicated (okay, newer) structure of widgets and tags, placement is a bit more sensitive.

Here's how I did it.

1. Just before the closing </head> tag (and after the closing </b:skin> definition), add the following code:

<style type='text/css'>
<b:if cond='data:blog.pageType == "item"'>
.fullpost {
display:inline;
} 
<b:else/>
.fullpost {
display:none;
}
</b:if>
</style>

It essentially does the same thing in the old Blogger, it's just formatted using the new Blogger conditional tags. It should also fall outside the skin definition as the block does not recognize conditionals.


2. Add conditional code to display "Read more..." within the post. Placement is important. It should be included within the widget code. You'll have to expand the widget templates and look for the div block which says "post-body." Include the code between that and the "post-footer" div block.

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

<!--Peekaboo code-->
<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'>Read more...</a>
</b:if>

<div class='post-footer'>
<p class='post-footer-line post-footer-line-1'>
</span>

3. Finally, in the actual posts, make use of the <span class="fullpost"> tags as before.