How to Add Read More Function in Blogger

Many Blogger users have one question in common. My articles are too long, which makes the index page and archive page very lengthy and have to scroll down long way to reach a particular post, so is there any way by which only the summary of the post can be displayed in the index and archive page and after clicking "Read More" link the rest of the page will be loaded?

Well, the answer is Yes. Blogger doesn't support this feature by default but you can make some changes in your template code to make this feature work after enabling the post pages.

Follow the below steps:

1) Login to your Blogger account and go to Layout > Edit HTML.

2) Click on “Download Full Template” to backup your template, in case anything goes wrong.

3) Click on Expand Widget Templates and search for the text "<div class=’post-header-line-1′/>". (This is the default code that Blogger includes but some custom templates might not have this code. If you can’t locate this text then try searching for "<data:post.body/>" instead.)

4) Add the below code after the "<div class=’post-header-line-1′/>" and "<div class=’post-header-line’>" tags if you’ve got both. In case, if you have "<data:post.body/>", add the below code above it.

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

5) Now add the below code after "<data:post.body/>" to actually create the “Read More” link in your post.(You can replace the "Read More" text with any text you like).

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

6) The code should look as shown below.

7) Now, Save the template and navigate to Settings -> Formatting in your Blogger account and scroll all the way down to the last option called “Post Template”. Paste the below code in it.

<span class="fullpost">

</span>

8) The code should look as shown below.

9) Now, when you go to Create New Post > Edit HTML, the above code will come in the editor as shown below.

Anything written above the <span class="fullpost"> will come as summary of your post and anything written between <span class="fullpost"> and </span> will come as main body of your post.

Now publish your post to see the “Read More” hack working on your blog. Feel free to comment and in case if anything is not working, post your questions in comments section.