Creating "After the Jump" Summaries : Provinding "Read More" option for the posts

Share |

You must have observed on lot of blogs articles on home page provides summary with "Read More" or similar option bellow. Once you click on it will take you to the complete post or article. Which is know as "Jump After Summary". Blogger does not provide this feature till now. But this feature was not provide by the blogger by default since long time. And many guys are doing this by using work around. But now it is provided by the blogger if you are using blogger in draft.

Please check the following steps how can you avail this feature:

Configure the Template / Layout of your blog

If you are using standard template form blogger then

Login to blogger and you are at Dashboard
Here click on Layout Link for the blog
Now you will be at Layout -> Page Elements for your blog.
There will be Blog Post element over here. Click on Edit link and that will shown as following:
You can specify the value for "Post page link text" and click on "SAVE" at the bottom of the pop up page.

If you are using third party or custom template form blogger then

Here the first thing you need to do is take a back of your HTML template. Hence you can restore it later if you wanted to undo changes (Click here to know how to backup and restore HTML template for blogger’s blog)

Login to blogger and you are at Dashboard
Here click on Layout Link for the blog
Now you will be at Layout -> Page Elements for your blog.
Click on "Edit HTML" link to go to edit HTML template.
Now, click on "Download Full Template" link to back the blogger template to backup the template so that you can restore it later on if some thing goes wrong.
Once it is backed up then click on check box "Expanded Widget Templates".
Then search for <data:post.body/> in the template code .

Once you've located that code, paste the following snippet directly below it:

<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>

Once you have done this you can Click on "PREVIEW" button to check if everything is correct.
If everything is perfect then click on "SAVE TEMPLATE" button to save template.
If something is incorrect then you can restore the backed up template. ( follow the instruction to restore the backed up template)

Once you have configured "After the Jump" for your blog. You create new post with "After the Jump" or "Read More" option as follows:

You need to login to draft.blogger.com and while creating or editing post for the blog do the following as shown in the image bellow
Click on the "After the Jump" wherever you want to place it as shown in the above image.
Once everything is done click on "PUBLISH POST" button to publish the post.
After this you can see the post as following image
And after clicking on "Read more >>" link you can have complete post as follows: