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

The New Post Editor With Static Pages

For many months, bloggers have been asking for the ability to add static pages - pages that do not contain dated posts, and that do not show up in the archive index, or in the main page display - to their blog. Before this year, only the latter possibility existed - posts that would not show up on the main page could be created by publishing posts back dated to appear before the earliest post on the main page. This created "static" pages that still appeared in the archives index - a messy workaround.

In January 2010, as a belated Christmas present, true static pages were added to the new post editor. In June 2010, the new post editor was moved into Production Blogger.

It's not difficult to make a static page. In the Classic Blogger GUI, dynamic pages (aka "posts") are accessible in the post editor under two tabs - "New Post" and "Edit Posts". Static pages are accessible under one tab - "Edit Pages". On "Edit Pages", you start with the "New Page" button. This simply takes you to a replica of the (new) post editor page, but a replica lacking fields for Labels, or Post Date. You then create, and publish, a page. Your new static page looks just like a post, except it lacks dates and labels, and it has a slightly different URL form.

With the New Blogger GUI (2011), Posts and Pages are separate menu items, along with Settings and other selections. When you're in the Pages editor, select "New page". From the pulldown list, select "Blank page" to create a new page. You can alternately select "Web address", if you wish to create a Pages entry that redirects the reader to any existing URL within or outside the blog.

Since static pages have neither dates nor labels, they won't show up in an archives or labels index. Pages have their own index - the Pages index. After you publish one static page, you have 3 choices how to index your static pages.

1. In a sidebar linklist, provided by Blogger.
2. In a horizontal tab index / vertical linklist not in the sidebar, provided by Blogger.
3. In an index of your own design.

You get to make this choice after you create the first static page - but as indicated below, you can change you mind any time you wish.

Having created and published your first static page, and selected an indexing option, you may create additional static pages, view and edit existing static pages, or create and edit posts. Once the first static page has been published, and the indexing option selected, you edit the static page index as a normal page element, depending upon what indexing option you have selected.

If you wish to change your post page indexing between the first two options, you can drag and drop to reposition the gadget, using Page Elements. Here, you have 5 positioning options, which give you 2 different formats depending upon positioning.

• Below the header, as a horizontal linklist, spanning the entire width of the header.
• Above the pages / posts container, as a vertical linklist, spanning the width of the pages / posts container.
• In the sidebar, as a vertical linklist.
• Below the pages / posts container, as a vertical linklist, spanning the width of the pages / posts container.
• In the footer, as a horizontal linklist, spanning the entire width of the footer.

You can drag and drop the pages index, and it will position and resize itself - try it and see.

If you decided to make your own Pages index (#3, above), you can go to "Page Elements", and "Add a Gadget", and select "Pages" for a Pages index, with the above choices. If you selected #1 or #2 above, you can use "Page Elements" and delete the Pages index, and create your own.

Once you have published a set of static pages, you can go to the "List of Pages". For each page, you'll find a "View" link and a page title. From each "View" link, you can extract the URL of the page. If you selected the custom index option, you'll need the page titles and URLs to use them in your own custom index, that you create separately.

This isn't a complicated option. If you are able to use the new post editor, try it and see what you think.

>> Top

The New Post Editor And Read More

One problem which we seem to see, pretty consistently, in Blogger Help Forum, is where the posts and a sidebar end up in one long column, with one above the other.

Reports like

My posts have vanished!

and

My sidebar (my archives, my Followers, my profile gadget, ...) have dropped to the bottom of the page!

are seen a lot in the forum. Generally, it's caused by trying to put too much in one place.

Recently, though, a few bloggers report the dropped sidebar symptom, after they try the new post editor, and the Blogger "Read More" option (called by Blogger, "Jump Break").

The "Read More" feature in Blogger blogs has been a long needed option.

Before the new post editor, Blogger, and at least 2 other bloggers, had their own competing, and mutually incompatible, procedures for making your blog show, and execute, a "Read More" link. All 3, to my knowledge, had drawbacks. One of the most obvious was that each different version was added by editing the post HTML, and the HTML was complex, and messy.

The "Jump Break" option, in the new post editor, is easy to add.

1. Add a New Post, or edit an existing post, in Compose mode.
2. Position the cursor after the words that you want to be always shown.
3. Hit the "Jump Break" button, in the editor toolbar.
4. The jump break is inserted into the post editor window.
5. When you publish the post, you'll see the words that you want to be shown, followed by the link "Read More".
6. What could be simpler?

---

(Update 2010/04/17): It's possible that the above instructions from Blogger, if you follow their complete instructions and add Jump Break to an older template, may be slightly misleading. Read their instructions, then read mine, please.

---

In rare cases, the "Jump Break" button in the toolbar may not work. If you have that problem, go into the "Edit HTML" mode, and insert

<!-- more -->

right where you need your jump break.

For all the simplicity in adding this (either in Compose or "Edit HTML" mode), it's not producing simple results.

There appear to be at least two scenarios where a blog, with one or more posts published with jump breaks, would have a dropped posts or sidebar section.

1. When the blog displays more than 10 posts in main page view, each post with a jump break, the 11th post will cause this problem.
2. If the jump break is inserted into the middle of a section of text with formatting implemented using a "<div> ... </div>", a "<div>" section broken by a jump break will cause this problem.

The workarounds to prevent these scenarios are obvious.

1. Reduce your main page size.
2. Don't add jump breaks in the middle of "<div> ... </div>" sections.

---

One possible cause of code containing lots of "<div> ... </div>", a "<div>" would be content composed in Microsoft Word, or another external word processor / desktop layout program. Another, as noted above, may be slightly misleading instructions.

Also, watch out for the third party gadget "Related Posts" LinkWithin. You need this gadget ahead of the "Read More" break (you want your readers to see it without having to display the entire post), but be careful and don't put the "Read More" break in the middle of the LinkWithin code!

---

But those workarounds may not be popular, or easy to implement.

1. Some bloggers like to publish blogs with 15, 20, or more posts in the main page.
2. Blogger who like this new, shiny feature may not be aware of when their posts include "<div> ... </div>" sections. How can they avoid breaking a section that they can't see?

---

(Update 2010/02/22): This week, we are seeing an incompatibility problem between the new Auto Pagination feature, and the older "Read More" variants. This is resulting in greatly reduced main page and archives page height. It appears that the proper solution is to replace all old "Read More" variants with the new "Jump Break" solution.

---

>> Top

Accepting Membership In Another Blog May Change Post Editor Settings

Recently, we've seen an occasional question about mysteriously changed post editor selections.

Where did my options toolbar go?

or

Why do I now see the new post editor?

Right now, as part of the deployment of the new post editor, there are 3 selections, in Settings - Basic - Global Settings - Select post editor.

• Updated editor
• Old editor
• Hide compose mode

If you make this change under one blog, you'll find it true for all of your blogs. I've also noted, under some circumstances, that when you accept membership in someone else's blog, and the other person was using a different post editor selection, the other person's selection will now be yours, globally.

The next time that you accept membership in a blog, check your post editor setting. If the owner of the blog was using a different setting, your setting may have changed.

>> Top