Friday, November 27, 2009
Creating "After the Jump" Summaries : Provinding "Read More" option for the posts
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.
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)
- 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:
<!-- more -->
And then write the remaining post as shown in the bellow image:
Related Articles
How to embed Adsense code within post (after post title and before post body) for the blogger blog ?How to add / Change Header image of blogger’s blog?
How should I restore my blog’s logo after changing to custom template?
How should I change my blog’s logo?
Change the order of the blog post archive
How to enable / disable adsense ads for the blog post widget ?
My blog is lost or forgot username / password of blogger blog
How to change scroll bar color and look and feel for a blog or website / web page?
Blogger Link list with the scroll bar support - link list with large set of links
How to change value of Older Post / Newer Post / Home for the blogger's blog
Enable / Disable receiving comments alert on email for blogger blog
How to make comments for blogger's blog moderated and How to moderate comments ?