adding a Read More Expandable Post For Blogger

This is one of the most popular tricks of blogger that many Blogger use. This is what you called Read More Post or some called it expandable post or Read Full post etc.

So here it is.. the step by step tutorial on how to add a Read More Expandable Post For Blogger

Step 1: Go to Blogger>Layout>Edit HTML

Step 2: Back Up your Theme or Template.

You Must Back up you theme because so if you do something wrong you can easily redo your old template in its usable form.

Step 3: Check the Expand Widget Templates Check box

Step 4: Find the This Code

<data:post.body/>

Step 5: After Finding step 4, add this code above.

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

The Code Should look something Like this:

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

<data:post.body/>

Step 6: Add this code Bellow Step 4:

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

The Code Should look something Like this:

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

<data:post.body/>

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

Now we are done Editing in the source code Now we will go on how to separate the outer post to the inner post.

Step 7: Go to Blogger>Posting>Create Post

Step 8: In using Read More on your post there is a code to add every time you post. This code separates the outer post and the Full post.

<span class="fullpost">

</span>

The Outer post is the one that is viewed first or what they called a teaser text.

The Inner post is the one that is hidden when the post is not fully viewed.

The Full post is the one where the complete post are. When you put it on a math equation this should look something like this:

Outer Post + Inner Post = Full post

This is a example post:

Your outer post should be here.
<span class="fullpost">
Inner post should be here.
</span>

So that's it Hope you understand. :D