How to add readmore or expandable post to Blogger

In the blog, the home page shows the full content of each and every blog post. Sometimes Post are bit of long and it makes your Blog Homepage Lengthy and it makes your Blog's  loading speed slow .
We can add a Read More link for the post and make it short.

It is also called Expandable Posts or  Post Summary. It is an useful method were only the summary of the Post will be shown in the blog homepage and rest of the post will be shown after expand .To expand

-------------------THE HACK IS HERE---------------

 Step#1 - Edit your template with his hack .

 

You are going to update your template .So , save your full template first .

 Add the following code below the <div class=’post-header-line-1′/> and <div class=’post-header-line’> tags if you’ve got both.

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

see it will be like this :-

If you don’t have the default  <div class='post-header-line-1'/>  tag then your result should look something like this :-

Just see both codes at the image below that they are right or not .

The first code is for make the post summary and now add one more code to add the "read more" link you can change the link name or add an "image of your readmore or anything" .


STEP#2

This code will go below the <data:post.body/> tag so copy the following and paste it in. Feel free to change the “Read more…” text to whatever you want the link to look like. Be careful not to delete any other code during this process.You can add any image source url to add an image readmore link Just change the "Read more..." to your image url in between of <img src="your image url" />
and paste it at the place of"Read more..." in the code below .

like this source is my image readmore :- <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6NNS-aUr5md5vVBy8s8SkfC9CkQluvoKbTmlY70O3F-ItFX6z6xoS9GdbCu5NXpCD6hkuQjjsWTBFwHoFR6kSWXRTb2a5WhWEYZmjWfwIbr869PdEzSxnPKVC0r4U4WgKVZinzrZ83fFd/s1600/readmore.png'/>

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

 Dashboard -> Settings ->Formatting . In the last option called “Post Template”.

Add the following code . 

<span class="fullpost">

</span>

NOW FIRST YOU WRITE YOUR POST SUMMARY . AND THE MAIN POST YOU WRITE 
in The main body of your post needs to go in between the <span class=”fullpost”> and </span> tags in order for the “read more…” link to work properly. See the screenshot below.

 ENJOY !