Expandable Posts

What is it?
The "Read more..." option (aka "expandable posts") allows you to show a shorter version of a longer post, or a summarized version, in the main page of the blog. The readers can then expand the post to its longer full version in the post-page by clicking the "Read more..." button. This option is great if you have posts that are too long to be shown on the main page.

For this code, the "Read more..." link will only show up for the posts that have been selected to show the link, which is a good thing. There are other versions of the code that won't function properly: the "Read more..." link shows up even if you don't want it to show up.

To get all the templates with this Expandable Posts function, make sure the templates are labeled with Expandable posts.

How to use it?
Most of the new templates here have been added with the 'Expandable Posts' code. You pretty much don't have to do anything much. The only thing you need to do is to separate each post you publish into two parts:

1. The summary part that will show up both in the shorter version and the full version.
2. The other part that shows up only in the full version in its post-page.
   

To do this, you first have to click the 'Edit Html' button, and add the following code (in red) into your post editor and separate your post according to the example below. You can continue writing in the 'Compose' mode but the fullpost-separator tags won't show up.

Type your summary here
<span id="fullpost">
Type rest of the post here
</span>

This is how it looks in the Post Editor (with the 'Edit Html' mode):


How to make it easier?
You can make it easier not to type the fullpost-separator tags everytime you post. To do this, go to the Settings --> Formatting tab. At the bottom is the Post Template form. Type in only the code in red above (the fullpost-separator tags) into the Post Template form.

You're done. The fullpost-separator tags will be automatically inserted in the Post Editor everytime you want to post. You can see the tags in the 'Edit HTML' mode to see where to place your posts accordingly.

How to change the "Read more..." text?
You can easily change the text to whatever you want, e.g. "Continue reading...", "[...]", and so on. Just go to the Layout --> Edit HTML tab and click the Expand Widget Templates box. Search for the "read more..." string (the red line below) in the XML code and simply change it to whatever you want. See the example below:


What if I don't want the "Read more..." code?
Delete it. Go to the Edit HTML tab and click the Expand Widget Templates box. Search for the "data:post.body" string (the red line below) in the XML code and delete the code in red only.

<div class='post-body' expr:id='&quot;post-&quot; data:post.id'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read more...</a>
</span>
<script type='text/javascript'>
checkFull(&quot;post-&quot; &quot;<data:post.id/>&quot;);
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<div class='post-footer'>

Credit: The 'Expandable Posts' code by Hackosphere.

 Subscribe