Expandable Post Summaries

Expandable Post Summaries is the method by which each blog post consists of a short paragraph of introduction followed by a 'Read More' link. This enables the reader to get a small introduction to each post on the main page. He can then click the Read More link if he gets sufficiently interested........

Many bloggers have reported confusion when they tried to follow the instructions on the official blogger help page for this hence I have tried to put the help in more easy to follow terms here. There are basically three steps to follow if you want to implement expandable post summaries in the new layouts template.



The first step is to put the code for the conditional css. This changes how posts display on different pages. To do this login to Dashboard and click on Layout for your blog. Then click on Edit Html and first backup your template by using the Download Full Template link. Then scroll down till you come to tag and add the following code immediately above it :


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


Save Template.

"READ MORE" LINKS

The second step is to add the Read More links which will appear after the paragraph summaries. To do this put a check in the Expand Widgets Template checkbox at the top of the Edit Template text box.

NOTE : If you do not put a check in Expand widgets template checkbox at the top of the TEMPLATE CODE BOX you will not see this code.

This is in the Edit Html subtab of Template tab. Then scroll down in the code till you come to the Blog Posts Widget code where locate this line of code :


<data:post.body/>


Add the code below immediately after the above code :

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

Save Template. This link will only appear on the main page and archive pages, and it will redirect your reader to the post page containing the full text of your post.
IMPORTANT NOTE : Do not use any other code or it will give error.

You can also add your Post Title at the end of the Read More link so that it will read "Read More on "My Best Post"!"




POST MODIFICATIONS

The last step is to modify the post template so that each post when created will show you where to place your summary paragraph and where to place the rest of the post. To do this go to Settings------>Formatting and scroll down to the end of the page to the box for the Post Template. Copy and Paste the following lines there :


<br />Here is the beginning of my post. <span class="fullpost">And here is the rest of it.</span>

Save Settings. When you click on Create Post and then Edit Html tab of Post Editor you will see the following






Replace the line "Here is the beginning of my post." (Type your summary here) with your summary paragraph. Then replace the line "And here is the rest of it." (Type rest of the post here.) with the rest of your post. Then click Publish to publish post.



CREATING YOUR POSTS

Login to Blogger.com and click on +New Post link on Dashboard. Creat ur Post now....


Before publishing make sure that the two span (code) lines are present and the line is at the bottom and the span=readmore line in between your summary post and the second half of the post.