Expand your post. (new blogger) ~~Read More~~

Have you ever think to expand your blog posts where only a few paragraph or sentences are display with the link "Read More". If the reader intersted, a click on a link will bring the reader to the full post. Expandible post is useful if u have the habit of writing long posts. With this function, your blog may look nice.

The first thing you have to ensure is "individual post page" (permalink) is enable.
Go into your Dashboard -> Setting ->archiving and make sure that ENABLE POST PAGES is set to YES.

Ok, here is the IMPORTANT part, go to the Template page -> Edit HTML. Before you make some changers, please backup your current template and put it in a save place. Click the "Expand Width Template" and wait for a few secound the template to be fully expanded. In the template editor window, look for this coad:

<div class='post-body'>

and just below that paste this code:

<!-- post summary hack begin -->
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<!-- post summary hack end -->


Now look for the following lone of coad which should follow immediately after the coad above.

<p><data:post.body/></p>
an then paste the following code after that line:

<!-- post summary hack begin --!>
<a expr:href='data:post.url'>Read More......</a>
</b:if>
<!-- post summary hack end -->
After the pastings, the whole thing should look like this:
<div class='post-body'>

<!-- post summary hack begin -->
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<!-- post summary hack end -->


<p><data:post.body/></p>

<!-- post summary hack begin -->
<a expr:href='data:post.url'>Read More......</a>
</b:if>
<!-- post summary hack end -->

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
where the codes in black are the existing codes and the codes in red are what you add in. Save the template.Go to SETTINGS > FORMATTING and then in the POST TEMPLATE, add in these lines:

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

Then all you have to do is to delete "Type your summary here" and replace it with the summary of the post you want displayed in the post, and then delete "Type rest of the post here" and type in the rest of the post.The last line should be </span> which had already been added in by the post template.

~~KaiToRwOrD~~

Posted in Blog and Web