Skip to main content

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

Comments

Anonymous 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
Nitecruzr 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.
I can't get it to work either and I have tried everything. I hate blogger, I should have never used it.
Nitecruzr 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 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.
nzoCALIFA360 said…
Jump-Break was Jump-started thanks to your tech-advocacy!-many Thanks!
Skorpionas said…
Thank you very much
Azwa said…
Thank you. your instruction easy to follow..
Natalie said…
this is an old post, but what if i can insert jump breaks fine, they show up fine, but then you can't actually click on the link to go anywhere? it's like an un-clickable link. when this happens, you also can't click the post title or the comments. my husband did a work around by right clicking and it worked, but that's silly. i have an old blog AND a custom template, haha. but sometimes it works, sometimes it doesn't. clearing the cache always helps... once.
THANK YOU SO MUCH for this post! I had never even known about adding jump breaks to my blog until recently. They were sorely needed because posts were long and packed with embedded media making the whole page sloooooooow to load.

However, when I had pasted in the code where 99% of the tutorials suggested, the template preview would show it working, but the actual live page didn't. Thanks to your examples illustrating where it SHOULD be and where Blogger's working IMPLIES it should be, I was able to simply C&P the code a few lines down and NOW IT WORKS!!!

Cheers to you, good sir!

Popular posts from this blog

Adding A Link To Your Blog Post

Occasionally, you see a very odd, cryptic complaint I just added a link in my blog, but the link vanished! No, it wasn't your imagination.

Embedded Comments And Main Page View

The option to display comments, embedded below the post, was made a blog option relatively recently. This was a long requested feature - and many bloggers added it to their blogs, as soon as the option was presented to us. Some blog owners like this feature so much, that they request it to be visible when the blog is opened, in main page view. I would like all comments, and the comment form, to be shown underneath the relevant post, automatically, for everyone to read without clicking on the number of comments link. And this is not how embedded comments work.

What's The URL Of My Blog?

We see the plea for help, periodically I need the URL of my blog, so I can give it to my friends. Help! Who's buried in Grant's Tomb, after all? No Chuck, be polite. OK, OK. The title of this blog is "The Real Blogger Status", and the title of this post is "What's The URL Of My Blog?".