Adding "Read More" to Blogger Posts

Share

'Read More' expandable post hack is one of the most popular blogger hacks. By default Blogger shows all the contents from your post on your blog homepage. Having everything on your homepage will make your blog homepage load slower. This might result in getting lower page views as your readers can read all your posts on a single page. So, it's better to give a summary of your posts on your blog’s homepage and then add a 'Read More' link below that post summary. Now, if a someone likes that post, he will click on that ‘Read More’ link and will get redirected to the original full post.

I would recommended this blogger trick to everyone. This will allow your readers to have a look on your blog contents quickly. Your page will get loaded faster, you will get more page views and your blog will look nice & organized.

Here are the steps to add "Read More" hack on your blogger blog.

1.Login to your blogger account.
2.Select "Layout" option from your Dashboard.
3.Now choose "Edit HTML".
4.Backup your current template.
5.Now click "Expand Widget Templates".
6.You will see your "Edit Template" Code box.
7.In that Template Code find ( CTRL + F )

]]></b:skin>

8.And just after that,add these code lines:

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

9.Now again find this code

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

10.And after this add these code lines

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url'><div style="text-align: right;"><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNGqINJdXiMjhTbqpf_JM7mEZ0yWda55Q8rRwhNBGOUSpz9c-INcdfhbzfnEDXlkeWgQC1vDmAA5Volx7suSJSKrPWNsuoVrhJKwTG-MbK2pTx3MFB60Y_n6NgWGUGqDujQK0a3XpWyGc/s400/readmore.jpg'/></div></a>
</b:if>

11.Now save the template.

12.Leave "layout" and go to "settings".
Select "Formatting".
at the bottom of the formatting page you’ll find Post Template form.
just copy and past the next code into it.

Post Before "read more"
<span class="fullpost">
And here is the rest of it
</span>

13.go to posts and try to post new post and you'll find the next code into post body:

Post Before "read more"
<span class="fullpost">
And here is the rest of it
</span>

put the part of the post that you want it to appears at your blog index and archive pages instate of:
Post Before "read more"

and put the rest of the post instate of:
"And here is the rest of it"

click Publish Post and Enjoy..