Read More… in blogger main page

In many professional websites you see posts with a short summary and link to the full post. Links like “Read More” “Continue Reading” and “More” are some of the text which link to the full post. This type displays maximum posts in minimum space. And it is a very good way to show content on your website so that readers read what they like.

Expandable post Summaries

Here’s how you can add this to your Blogger blog (Source: blogger help):

1. Go to Layout->Edit Html
2. Download Full Template
3. Check the Expand Widget Templates
4. Just search for this code

<body>

and then paste this code just below the above code.

<style>
<b:if cond=’data:blog.pageType == “item”‘>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

5. Now search for this code:

<data:post.body/>

and then copy this code just below the code mentioned above

<b:if cond=’data:blog.pageType != “item”‘><br />
<a expr:href=’data:post.url’>Continue Reading</a>
</b:if>

You can replace the text in bold with any text (like”more”) of your choice or even an image.

To add an image use the following code:

<b:if cond=’data:blog.pageType != “item”‘><br />
<a expr:href=’data:post.url’><img src=’Your-image-link-here‘/></a>
</b:if>

Replace the code in bold with your image link to display an image for read more posts

6. Now the last step, Go to your Blog then go to Settings and then click on Formatting link. Search Post Template and paste this code:

<span class=”fullpost”></span>

Put the code in Post Template

Your post editor will look like the following:

Post editor will have the above code

Whatever you write between the span class=”fullpost” will not be displayed on the homepage and all the other content will be displayed on the homepage.

For example if you type the following code in the post

Beginning of my post. <span class=”fullpost”>And here is the rest of it.</span>

The actual post on the main page will look like this:

Beginning of my post.
Continue Reading

  • Janet

    Thanks so much for posting this !! My blogs are on Blogger and I’d wondered if there was a way to show the shortened posts.

  • bloggodown

    You can take a tour of the site and you may find other hacks that might help you

  • Bunkai

    This isn’t working for me. Not sure if it’s the template that I’m using or what, but I get the “Continue Reading” link at the bottom of my post, but at the top of the page above my header, I see the span.fullpost {display:none;} line sitting there.

  • Bunkai

    There needs to be style tags around the first set of code that you place just after the body tag. At least, that made it work for me.

  • bloggodown.com

    Thnx bunkai for the feedback. I have corrected the code.

  • Hamid Ali Sofi

    Great Post !

    But can you please help me on showing a "read more image" instead of "Continue Reading".

  • gautam

    @Hamid Ali Sofi I have updated the post, you can try out the read more image now