Too many Long posts to show on Home Page? Add “Read More” !

If you usually write long articles for your blog and want to show maximum of them on the home page of your blog, what people normally do, that they simply increase the number of posts to show on home page.
But this not only makes your page longer, but it also takes little more time to load than blogs with fewer posts on their home pages.

“Expandable Post Summaries” is the solution where a summary of the post is given as a teaser paragraph and then a link to the full post is given below the incomplete post- such as

“Read more...” or “Continue Reading…”
This little trick adds itself to every post of your blog, you can choose to display a selective amount of text from the beginning of each post as a teaser instead of showing the entire post on the front page of your blog and when the reader wants to read the rest of the post, he can click the “Read more…” link, to see the full post.
This is very handy if you have lots of long articles page and you want to show maximum of them on homepage.

Here’s the procedure to do it…

Note that you’ll need to have post pages enabled in order to make this feature work.
If it is disabled, then enable it… from the Settings go to “Archiving” tab, and select “Yes” to Enable Post Pages.

1. The front page should always be backing up your blogger template, so than if anything gose wrong, you’ll have your backup to restore to original condition.
(If you dont know to backup, here’s the little procedure…Goto “Layout”, click “Edit HTML” tab, and click “Download Full Template” link.)

2. Now from same “Edit HTML” page, check “Expand Widgets Template” first and then from the code written below
search for the 

<div class='post-body'>

Sometimes you’ll find a little different code instead of above, like

<div class='post-body entry-content'>

……….both are same.. So Don’t Worry about that.
(Tip: To Open Search Box, Press Ctrl+F )

Now paste the following code AFTER <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 -->

3. Once it is done, then search for the code

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

If your using default template, then you’ll find
<data:post.body/>

and then paste the following code AFTER it.

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

You can change the text “Continue Reading…” to any text you want, such as “Read More…”.

3. Preview the template first, DON’T save at this point. If Preview window shows your blog fine and with the “Continue Reading…” link after every post, then it means, everything went perfect. Otherwise It’ll show an error, and prompt you to remove them first before saving.
Common mistakes we do is incomplete Copying/Pasting the code.
Make sure you copied everything carefully and pasted it in right places, defined above.

4. Save the template now.

5. Now go to the “Settings” and under the “Formatting” Tab, go to “Post template” and add the following code in the box.

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

6. Save the Settings again.

Purpose of this code is to divide the summary of the post and the rest of the post.

7. Create new Post and Replace your summary with the text in red and then the rest of your post with the text in green.

Done ! 

——————————————————————
NOTE: This will only work on new posts of your blog (after adding these codes). It’ll not work on the older posts.