Adding Expandability to each Blogger Posts using "Read More..."

We often find web pages with a very small scroll bars at the right ,that is, those having all the full expanded posts putting entire individual post's contents on the homepage. It not only takes time to transfer/load the page but also increases the page space complexity. In this case, Adding an expandability to each blogger posts using the link "Read More..." will allow readers to see all the posts in a more organized & compacted way & help them to switch to full posts option.

It will also help in loading the pages more quickly. Here is the full working & tested way to add "Read More" to each blogger posts.Now Proceed as follows:

1. Login to your blogger account.

2. Enabling Post Pages: Go to Settings > Archiving, then select Yes > Save the Settings.
3. Pre-formatting Post Editor: Go to Setting > Formatting, then scroll down to bottom, paste the following code in the Post Template & Save Settings.

4. Now go to Layout > Edit HTML, click on Expand Widget Template & search for the following code:

<data:post.body/>

5. Copy the code below & paste it ABOVE/BEFORE the previous line in blogger template.

<b:if cond='data:blog.pageType == "item"'>

<style>.fullpost{display:inline;}</style>

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

<b:else/>

<style>.fullpost{display:none;}</style>

6. Copy the code below & paste it BELOW/AFTER the <data:post.body/> line in the blogger template.

<b:if cond='data:blog.pageType != "item"'><br />

<a expr:href='data:post.url'>Read more...</a>

</b:if>

</b:if>

7. Save the Template & Its all done. Now, Go to Posting > Create. You will see

in the post area in the Edit HTML tab.

Anything you put above the tag  will be the introductory text.PUT main body of your post between the  and  tags so that the “Read more…” link expands the main body of the post.

Enjoy Expandability.