Create expandable post summaries in Blogger Beta

In this post I explain the trick given in the blogger help to create expandable post summaries. I present screenshots to explain the steps required to create the "read more..." link as found in this post. This post specifically focuses on Blogger Beta.

Ok lets start the process of creating expandable posts.

STEP 1
Login to your blogger account and go to "Template -> Edit HTML" page as shown below.

Click on the image to enlarge

STEP 2
Copy the following style information BEFORE </head> tag in your template as shown below,

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

Click on the image to enlarge

STEP 3
Save the template. This will ensure that the style information is saved before we perform the next step.

Click on the image to enlarge

STEP 4
Check the "Expand Widget Templates" box as shown below,

Click on the image to enlarge

STEP 5
Search in the page the tag <data:post.body/>

STEP 6
Copy the following code below the tag <data:post.body/>,

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

Click on the image to enlarge

Save the template. You are almost done ... :)

STEP 7
Goto "Posting -> Create -> Edit HTML" and create a new post. Use the following code to separate the summary from the full post

Summary goes here.

<span class="fullpost">Full Post</span>

Click on the image to enlarge

Publish the post to see the summary, and when you click on "Read More !" you will see the full posting. That's it !!!. Do not forget to leave your comments below.

Ref:
[1] http://help.blogger.com/bin/answer.py?answer=42215