Friday, October 9, 2009

Blogger Read More Links in Posts with Jump Breaks Feature

In this Blogger tutorial you will learn how to insert jump breaks into your Blogger posts (Blogspot posts) as an aid to quick navigation for your visitors. Jump Breaks in Blogger provide an easy way to show only a snippet of your whole post on the home page of your blog with a read more link below it for the rest of the story.

I have already written about a Blogger expandable post summaries hack which provides a read more feature for a Blogger blog homepage. For most Blogger webpublishers (Blogspot webpublishers) this hack is no longer necessary because Blogger as part of its 10th birthday celebration introduced a new feature called Jump Breaks. I cover several methods to insert jump breaks depending on whether you are using a Blogger default template or a customized Blogger template.

The advantage of adding jump breaks to your Blogger posts is that your readers can quickly and easily skim your most recent posts for what interests them rather than having to scroll through a whole bunch of long articles. This is definitely a big help for those of us like me who often write articles longer than 500 words. If your posts are short and sweet you may find that adding this read more feature is unnecessary however you can still apply it when you do have a longer post. Below is an example post which illustrates the Jump Break feature in action.

Example post showing Blogger new jump breaks read more feature
How to Insert Jump Breaks (Read More Links) in Blogger
It is easy to insert a Jump Break into your Blogger posts (Blogspot posts) at any point of your choosing.

There are two methods of inserting the Jump Breaks in Blogger. Which method you choose depends on which post editor you are using. If you are not sure which editor you are using check this out by going to Settings > Basic and scrolling to the bottom of the page. Under Global Settings you will see a radio button next to old editor or updated editor.

Select Blogger editor from Settings, Basic
  1. Method 1
    Insert Jump Breaks - New Blogger Post Editor Only

    In order to use this method you need to be using the updated editor in Blogger or have Blogger in Draft enabled.

    • When creating a new post in the Blogger Post Editor position the cursor in the editor at the point you wish the Jump Break to be inserted

    • Click on the insert Jump Break icon (currently the last option on the menu)

    Click on the Jump Break Icon to insert a jump break into a Blogger post
    • A jagged dividing line will appear to mark the insertion point

    A divider line indicates where the jump break will occur
    • Publish your post as normal


  2. Method 2
    Insert Jump Breaks - Old Blogger Post Editor Only

    If you are using the old post editor rather than the new post editor you can still insert jump breaks into your Blogger posts.

    • When creating a new post in the Blogger Post Editor make sure you are in the Edit HTML mode rather than compose mode

    • Insert the following code at the point where you want to break the Jump Break to occur:

      <!-- more -->

    • Publish post as normal

Tips and Troubleshooting
  1. To Add Jump Breaks to New Posts Automatically
    To save time it is possible to automatically add Jump Breaks to posts with the following method:

    • Go to Settings > Formatting and scroll to the bottom of the page

    • Under Post Template paste <!-- more --> into the box and save. The next time you create a new post the <!-- more --> will automatically appear. Make sure you are in the Edit HTML mode to see <!-- more --> appear.

    Add the code to your Post Template in Settings | Formatting to automate Jump Breaks
  2. To Change the Read More Text
    If you want to change the Read More text for something like Read Full Story or Continue Reading you can easily do this by:

    • Go to Design > Page Elements

    • Edit the Blog Posts widget

    • Change the post page link text (Read More text) which appears at the top of the page to your preferred text and save

    Jump breaks page link text can be changed via Blogger Layout  Page Elements  Edit Blog Posts
  3. To Manually Add Jump Breaks to Blogger For Users of Customized Templates
    If you are using highly a customized template or have customized your Blog Posts widget you may experience a problem in getting the Blogger Jump Break feature to work. In this event you can edit your Blogger template to enable Jump Breaks.

    • As a precaution back up your template by downloading full template to your own computer

    • Tick the Expand Widget Templates checkbox

    • Using CTRL + F find the following line of code:

      <data:post.body/>

    • Directly below this line insert the following code into your Blogger template:

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

In this tutorial you have learned how to create expandable post summaries using the new Blogger feature Jump Breaks. You now have the option to easily insert Jump Breaks into your Blogger posts so that longer posts appear with only an introduction followed by a Read More link.

I have shown you 2 methods to insert the Jump Breaks and Read More links into your Blogger posts depending on whether you are using the new or old post editor features. I have also given you some tips to make sure you get the most out of the Blogger Jump Break feature including what to do if the Jump Breaks feature does not work with your customized Blogger template. As always I would welcome your feedback about your experiences with the expandable post summaries Blogger feature (Blogspot feature) or any other feature you may be having an issue with.

Related Articles
List of Blog Know How Tutorials for Blogger Blogs
Blogger Buzz - You Might as well Jump!

11 comments:

  1. Thank you very much for point 3...so easy :)

    ReplyDelete
  2. I had no idea this was possible in Blogger. Thanks and a great day to you!

    ReplyDelete
  3. Thanks Anonymous. Glad this was useful to you.

    ReplyDelete
  4. Welcome Aria. I see you have joined my followers. Hope adding a read more link makes life a whole lot easier for you.

    ReplyDelete
  5. Hey thanks a lot for the information..But I need a help from you..

    So we can add the jump breaks or the read more part in my old post also which is already published on the blog..

    Pls tell me how we can do that...i need your help for that..

    ReplyDelete
  6. Hi Rohit. If you are using the old editor just edit the older post and add the !--more--code as you normally would and then hit publish. If you strike problems try saving to drafts first and then publishing. I have noticed this feature has a glitch so you may have to give it a couple of tries

    ReplyDelete
  7. Thanks for this tutorial! I have a customized blogger layout with three-columns for Son of Moto. When I do the jump break, on the homepage, my right-hand column somehow gets messed up and instead of appearing on the right-hand side, it appears under all my posts in the middle column. However, when you click through to an actual post, it shows up on the right-hand side. When I get rid of the "Read More" feature, it shows up fine. Do you know why this is? How I would be able to fix that? I tried with the custom HTML you show above, but that didn't work.

    No need to respond to this if you are very busy :-)

    Thanks!

    ReplyDelete
  8. Hi Aarti. There are a lot of reasons why the sidebar can drop below the content area. Usually it does so because there is not enough space to display it correctly. My guess is that the jump break has forced the content page out too far causing the sidebar to drop. I would need to take a look at your blog template to see how to resolve this issue. I will email you.

    By the way I loved your blog. I have had a love affair with books my entire life too!

    ReplyDelete
  9. I am having the same EXACT problem as Aarti and am most frustrated. I have spent hours researching this problem and do not know how to fix it. My blog is currently private but I am happy to give you access and my firstborn for any help. I also am using a 3 column Rounders 4 but in a little different column order.

    Married to my blogs problems,
    Ms T

    ReplyDelete
  10. Ms T. Happy to take a look at your jump break issue. First born not required :) Join my subscribers or leave your email and I will be in touch

    ReplyDelete