Add "Read More" link to Blogger Posts

Saturday, 14 May 2011

Add "Read More" link to Blogger Posts

Most of the bloggers, want to show more than one post in their blog's home page, but displaying all the content on the home page of each and every post makes the home page very lengthy, and visitors may miss out any article while scrolling down the entire length of the page.
So here's a method for bloggers to display only a part of the posts, and not the entire posts. If a visitor wants to read the complete article then he/she will click on the "Read More" link at the bottom of the post, which will be redirected to the particular post.



Step 1 – Update Your Template Code

1. Log into the Blogger.com account
2. Go to "Layout" section
3. Back up your current template, by downloading it.
4. Now click on "Expand Widget Templates"
5. Now search (CTRL + F) this code

<data:post.body/>

6.Add the following code just above the <data:post.body/>

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



7.And then again add the following code just below the <data:post.body/>

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



9. Now save the template.

Step 2 – Create a New Post

1.Click on Posting tab
2.Create a New Post
3.After creating the post insert <span class=”fullpost”> and </span>Thus that hidden Part of your post should be inside the tag


Note: This tag should be inserted in an HTML mode (Edit HTML tab)
Example

TEXT VISIBLE IN HOMEPAGE <span class=”fullpost”>HIDDEN TEXT</span> 

Page preview for above Post

If you want to go back and update your old posts with this new “read more…” feature you can. Just go back and edit each post manually. Essentially you’ll need to paste in the <span class=”fullpost”> and </span> tags
 

Home