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.
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:
Note: To use "After the Jump" or "Read More" option in the normal blogger site (www.blogger.com) you can write following code after the summary:
<!-- 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 have Add a Gadget option for Blog Post section of the blogger’s blog and how to make Blog Post gadget / widget moveable?

How to have Add a Gadget option for Header section of the blogger’s blog and how to make Header gadget / widget moveable?

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 ?



Share |

Topics

 
Embed Wave to Blogger