New Expandable Post Summary utilizing the new Blogger Editor

If you’ve been blogging the fast few years using Blogger platform probably you’re one of who implemented the hack to show expandable post summary on Blogger templates. However now you can forget it, as the new Blogger Editor enables you now to use a one-click-button to show a “Jump Break Text” on your post. In this post we will be discussing on how you can use this new functionality and to turn your old template to accommodate the effect of expandable post.

There some advantages if you will use post summaries on your blog homepage. First it will add clean-theme design experience for your visitors and exposed all your blog posts to suggest your readers what your blog is all about. If your readers will be interested in  reading one of your post, then it will be automatically contribute to page impressions which is important if you’re serving third party advertisements like Adsense.
First thing you should do is check if you’re using the latest version of Blogger Text Editor. Here are the few steps to check that:

1. Log on to your blogger account.
2. Go to Settings–>Basic, then scroll down until you find “Select Post Editor”.
3. Tick the radio button for the “Updated Editor”. Check the new features here.

4. Save settings.

Now at this point let’s check if your template support the expandable post summaries functionality. We can do that by simply following this steps:

1. Log on to your Blogger account.
2. Go to Layout–>Edit HTML, then tick ““.
3. Search for this code:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link' style='color:#008000; font-weight:bold'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>

4.If your template don’t have the following code block, it means that you’re using old template and therefore won’t support the functionality. To turn your template to support jump-text then find the code below.
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

5. Then immediately after this code block paste this codes:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link' style='color:#008000; font-weight:bold'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>

6. Save your template.

Tips:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link' style='color:#008000; font-weight:bold'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>
</div>

The orange color code will have you able to further customize the “Jump Text” color, font and style to adapt your template.
Now that you have implemented the new functionality to your template, let us now discuss on how you can use this functionality on your posts.

1. Log on to your Blogger account.
2. Go to Posting–>New Post, then compose your article.
3. After you have done the article, now decide till what part of the article you want to show on the summary. I suggest that you show the first article paragraph as the preview or introduction of the post.
4. Now place your cursor just below the first paragraph then click the “Insert Jump Break” button icon at the upper right menu of the editor.

5. Then publish your article, you should see the post breaking at the point where the break line lies. All of the texts above the line will appear on the summary while all the texts below will appear once the reader click the jump text (whole post article).
Tips:
1. Remove the break line by issuing a “Delete” button press on your keyboard after placing your cursor on the immediately before the line. Other way is by going to the Edit HTML tab then delete the commented “more”.

2. To customize the “jump text” head on to Layout–>Page Elements, then find Blog Post–>Edit then look for “Post page link text:“. Modify it to your preferred jump text or leave it on default (Read More).   

If you want to see the perfect implementation sample of this tutorial you can head on TechGeeze.com or AutoGeeze.com. Hope this tutorial will help my fellow blogger. Don’t hesitate to ask any questions by either contacting me by dropping a comment or at the contact form.
  • Luigi

    I hope that they realize that there are easier ways now for the summary. As a visitor of a blog site, it is very important for me to see what in a more organized way what to read on the site. These are really good tips.

  • paula@heat pump systems

    Hello,
    I really like your way to present info, and I appreciate your attitude and intention to show the right ways and paths.
    I trully thank you for that, besides I just want to say "keep it on"

  • lupus signs and symptoms

    I was a blogger lover. It is free, custom-able theme and simple, but for unknown reasons, now i am a wordpress fan 😀

    Even though i still using blogger for some projects.

  • optometry software

    your blog gives lot's of useful practical tips and information, keep sharing such useful information

    Thanks