How To create "Continue reading" or "Read more" type Expandable posts link

When I started with blogging, I was really amazed with how I can make posts expandable that is, only summary should be visible on homepage while full post is there on post page.
In order to implement it on my blog, I googled several times and updated my template on the basis of guidance and as a result I was able to make posts expandable on my blog. I will share my experience so that bloggers interested in similar action need not re-invent the wheel.

Step 1. Before starting you must go to your blogger account, login and goto template tab, click edit HTML and download full template, to avoid any risk.

Step 2. Click expand widget

Step 3. Now do a search (CTRL + F) within the text editor for the following code post-header-line-1. This is the default code that Blogger includes but some custom templates remove it. In that case search for data:post.body this tag will be present for sure, since this tag prints the body of your post.

Now search for div class=’post-header-line-1′ and div class=’post-header-line’
If you have both of the above tags, add a snippet as shown in the image

If div class="’post-header-line-1′/" tag is not present, then result will look like –

Congrats with this, almost half of the job is done.

Now you have to create “Continue reading …” link in your post. For this below shown code will go below data:post.body tag and the result will look like –
Ok, with this we are done with editing the template code, so after this save the template, if you got an error, check above steps once again.

Step 4. Now we will be adding Class tag in the Default Post Template, For this navigate to your blogger account “Settings”, then to “Formatting”
and scroll all the way down to the bottom to the section called “Post Template” and add following code as shown in image- and save settings.
And with this we this, we are done.
Now create a new post. Text written before span class="fullpost" will be displayed as teaser or summary on homepage while the text written between span class="fullpost" and span will be displayed when we will the visitor will click for “Continue reading...”.
Now enjoy posting with this expandable experience.

I must thank to all bloggers from whom I learned the trick and collate it before implementing and further sharing with you all.