Saturday, April 17, 2010

Making Jump Break Work For Blogs With Older Templates

The new Blogger solution for auto summarised posts, also known as "Read More" or "Jump Break", is becoming increasingly popular in Blogger blogs, for several reasons.
  • Auto Pagination resulted in display segmentation, caused by the perceived need to publish hundreds of posts on the main page.
  • Desire to display a dynamic index of posts as the main page.
  • Desire to simply make the main page and / or archive retrieval displays smaller.

The "Jump Break" feature itself is reasonably easy to use, when you are using the New Post Editor, and with blogs that use a template released after Jump Break was released - apparently in September 2009. If your blog was created before then, you may need to add a critical bit of code to the post template.

The simplest way to add the necessary code would be to refresh the post template.

If you have customised your post template, this won't be a good idea. If you want to keep the current post template, and add the critical bit of code, you're going to have to edit the template HTML, and you're going to have to Expand Widget Templates when you edit the HTML.

Instruction from Blogger, in Creating 'After the jump' summaries is pretty simple
After backing up your template, then click the Expand Widget Templates checkbox, and scan your HTML for the following snippet:
<data:post.body/>
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 >
After you've pasted in the code, click Save and then you're done!

It's possible that such simple instruction may be slightly misleading.

Here's the snippet in question, as seen in the template in my newest test blog, "Chuck's Jump Break Test", with surrounding code to provide a contextual reference.
<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

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

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

If you read the above instructions literally, Blogger would have us take an older template
<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Add the recommended snippet to produce
<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content'>
<data:post.body/>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

I suspect that the update may be much more correctly installed as
<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

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

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

Or possibly, you may even want the full, original snippet
<div class='post-header'>
<div class='post-header-line-1'/>
</div>

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

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

<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/>
<span class='fn'><data:post.author/></span>
</b:if>
</span>

So, what is "expr:title='data:post.title'"? Look at my demonstration, hover the mouse cursor over "Read more »", and see.

If you just added the Jump Break to your blog after following the instructions from Blogger, and you followed their instructions literally, you may be observing odd details. It's possible that reports of post / sidebar alignment problems, and odd problems with photos and jump break, may be related to this confusion. You may do well to modify their instructions, when you update your template.

>> Top

10 comments:

SOJOURNER said...

Hi,
I am glad you are here!
I have spent two days now trying to create a break jump for my posts. No luck. I followed all of your directions adding to and removing codes in the Edit template. I tried everything you have here, and some other suggestions that I found in the Buzz [on truncating]. I have the new editor, and the template is one offered in the "Blogger Template Designer". It is the one based on Picture Window by Josh Peterson.
I don't blog that often but the articles are long and need to be truncated.
So far, nothing is working, especially the Jump Break button. :( I would appreciate your thoughts.:) Thank you

Chuck said...

If you're using Picture Window, all of the code should be in the template already. You don't belong here. Get a clean blog template, then reset the post template.

This is Sophilicious. said...

I can't get it to work either and I have tried everything. I hate blogger, I should have never used it.

Chuck said...

I can't get it to work either and I have tried everything.

That happens to us all, eventually. In this case, you are better off trying for peer advice, in BHF: Something Is Broken.

Glenn Brank said...

I've never had problems inserting a jump break into my posts, but in the last couple of months, it seems to have changed. Formerly, clicking on the jump tag took readers directly to the next, unread line in the post. Now, for some reason, it opens the whole post but also takes me back to the very beginning of the post. I think this puts readers off -- I don't want to have to search for the jump point where the post had stopped. Did something change in the Blogger post composition codes? (Note: I am NOT a tekkie, so if you have the answer, make it as simple to understand as possible...and thanks!)

Cindi Almira Permanaputri said...

hello, i wanna ask. jump break worked for my 1st,2nd,and 3rd post. but then, i made a new post, i inserted jump break but it didn't work. the jump break won't appear. can u help?

Vicki Bensinger said...

I'll try. This all sounds so confusing.

nzo.califa said...

Jump-Break was Jump-started thanks to your tech-advocacy!-many Thanks!

Skorpionas said...

Thank you very much

Cik Wa @ Azwaty Mohd Azmi said...

Thank you. your instruction easy to follow..