Create Read More with Jump Break Feature in Blogger

I didn't realized that inserting a jump break in my Blogspot posts is soooo very easy!

Hmmm...I have eyes but don't see! It appears that this wonderful feature, the 'jump break' icon at the extreme right of the New Post Editor's toolbar had emerged since last September and I had overlooked it for so long! Gosh!

This was one of Blogger's 10th birthday celebration gift to us! Happy Belated Birthday and a million thanks to the Blogger Team and all who have worked hard and smart to share this wondrous present!

I'm so excited to have stumbled upon this two nights ago and have just applied them at my blog posts! And, I would like very much to share here on how to insert the jump breaks for those who are also panting for such a feature.
(This post is specially dedicated to a dear friend, Cheah of No-Frills Recipes, an aspiring blogger)

What is a jump break?
It is a useful tag that you can insert in a post, especially for long posts that appear in your blog's index page or homepage. With a jump break, it will create an expandable post summary, where the portion above the break shows a snippet of your post, with a "Read more" link below it, directing to the full post if the reader wants to read the rest.

How to create 'Read More Post Summaries' in Blogger,
using the 'Insert Jump Break' icon, only available in the New Post Editor :

1. First, enable the Post Pages to make this feature work. Go to Settings | Archiving, and set Enable Post Pages to Yes. Then click Save Settings.
   
   
   
2. Then, ensure that you have selected the New Post Editor which will display the Jump Break icon in its toolbar. Otherwise, go to Settings | Basic and scroll down to the field, Select post editor. Then, simply select Updated editor and Save settings to get this new feature.
   
   
3. Next, edit your post in Compose mode, using the New Post Editor. Decide at which point in the post you'd want to create the jump break and place your cursor there.
   
   
4. Click the Insert Jump Break icon on the right side of the toolbar. Instantly, a grey horizontal bar appears at the cursor point, to indicate the position of the break. You can drag that bar to reposition if you wish.
   
   
   
5. Once done, you can publish your post. Click View Blog instead of View Post which you'd normally do, to see the result. You will notice that the Read More link is shown where you've placed the jump break.
   

So simple and easy, huh!

Points to note:

• Blogger does not generate post summaries automatically. The Jump break for post summaries has to be inserted manually in each post, using the icon already available on the New Post Editor's toolbar, to present the 'Read more' feature.
• Even if you're not using the New Post Editor, you can still insert a Jump break in Edit HTML mode. You just need to manually insert the tag: <!-- more --> (with a space before and after the word, more) at the place where you want to position the break.
• When you've composed a new post with the jump break and then publish, remember to click 'View Blog' instead of 'View Post', to avoid confusion. Clicking 'View Blog' will direct you to the blog's main or home page, to enable you to confirm that the post's snippet is being displayed with the 'Read More' link text below it, whereas 'View Post' will lead you to the post page which will, of course, display the full text.
• Edited: refer to updates: January 23 & 30, 2010 below regarding some problems with LinkWithin widget and the missing 'Read More' link.

Customize the Read More text, if you wish:

By default, the jump break link text is Read more >>. You can easily change it by going to Layout | Page Elements. Then, click on the Edit link on the Blog Posts widget, and change the Post page link text to whatever you'd like.



Apparently, you can also edit the HTML of your blog's template to make Jump Breaks work. Nonetheless, I'd rather use the Insert Jump Break icon as I like the flexibility of placing the breaks in my posts whenever or wherever I so desire.

Related external links:

• Blogger Help - Creating 'After the jump' summaries
• Blogger Widgets - Post summaries on Blogger with Read More
  

Enjoy! Keep learning and keep smiling!

Update: January 23, 2010
Tip: If you're having the LinkWithin widget below your blog posts, take note that adding this 'Read More' (or 'Jump Break') feature will clash with the LinkWithin widget, for positioning below the post summaries. Not to worry though! Check my tutorial on how to reposition the LinkWithin widget to be beneath the Read More link.

Update: January 30, 2010
Tip: If after applying the Jump break feature and your post did show the post summary at the homepage, but the text link 'Read more' did not appear below it, then probably you'd need to add a relevant JumpLink html code to your blog's template to make it fully functional. Know how to include the 'Read more' link below post summaries here for customized templates.

Last edited: May 17, 2010