109 How to Create Post Summaries in Blogger Layouts Blogs February 28, 2008 /

One of the questions I am asked most about my blog is how I create post summaries on my main and archive pages.

The hack I use for this is Ramani's "selective expandable posts". This hack enables me to choose whether my posts are summarized or not, and provides a "Read full post" link only for those which I have chosen to summarize.

Whereas I would normally refer readers to Ramani's original post to learn how to implement this technique, many readers have expressed their difficulties in using this, and Ramani seems unavailable for support. So I have decided to write a full explanation of how to use this hack in the hope that this will answer many of your questions, and enable you to use this hack in your own Blogger layouts blogs.

Please note: This "selective expandable posts" hack was written for Blogger layouts blogs (those which use widgets). If you need to learn how to use such a technique for Classic Blogger templates, please refer to this post instead.

How the selective expandable posts hack works

This technique uses a combination of JavaScript and Blogger code to display your selected portion of a blog post on your main, archive and search pages. On item (post) pages, the full content of your post will be displayed.

This technique is very useful for bloggers who write long posts, or who prefer to provide a "teaser" of their full post on the main page, which would encourage readers to read the whole article on item pages instead.

Before installing the selective expandable posts hack to your blog, you should be aware of two things:

• Only your future posts (and any previous posts you choose to edit) will feature a summarized version on the main pages of your blog. This is because you must use a post template to make the summaries appear. Those posts which do not include this template will not be summarized.
• To ensure the summary hack works, you will find it necessary to edit your posts in HTML mode, rather than using the rich text editor. Again, this is due to the necessity of the post template; if you edit in compose mode, you will run the risk of accidentally deleting some code which is not visible in the rich text editor.

If these considerations are something you can live with, you're ready to install the "selective post summary" hack.

How to Install the Selective Post Summaries Hack

This isn't the easiest hack to install in a Blogger template. In fact, it took me a few attempts to get this right the first time I installed it! So I would advise you to remember two important things:

Back up your existing template before making any changes whatsoever!

You should always back up your blog template before making any changes to the template code. It is even more important to back-up before installing this hack, as we are dealing with the display of your blog posts, rather than a simple edit to your styling code!

Read each step fully, familiarize yourself with the code, and then read it again!

It is important to pay attention to detail when installing this, otherwise you may place code in the wrong place and get that dreaded "Your template could not be parsed" message.

Also, there may be slight differences to the code which you will be looking for in your template. I will point this out where appropriate, along with the alternatives which may be present in your template.

Here is my step by step guide to installing the selective post summary hack in your blog template:

1. Back up your existing template code!
   
   To do this, go to Layout>Edit HTML in your Blogger dashboard, and click on the link which says "Download full template". This will allow you to save a copy of your existing template in XML format which you can use to restore your blog if ever your template edits go awry.
2. Choose to create a new post. On this page, click on the "Edit HTML" tab so this becomes highlighted. Then in the content box below, paste this entire section of code, exactly how this is written here:

   This is the summary
   
   <span id="fullpost">
   
   This is the rest of the post
   
   </span>

   Then save this post.
   
   This will only be a temporary post, to help you understand if the following edits you make are working. Once you have installed this hack into your template, you can delete this post.
3. Next go to Layout>Edit HTML in your Blogger dashboard, and check the "Expand widget templates" box.
4. We now need to add the required JavaScript code to the head section of your blog template.
   
   This is the easy part of the installation! Simply copy all of the code on this page to your clipboard (you can do this easily using the keyboard shortcuts CTRL+A followed by CTRL+C).
   
   Next, locate this line in your blog template:

   </head>

   Paste the code from your clipboard directly before this line.
5. Here comes the tricky part...
   
   In your blog template, you will need to locate the DIV section which contains this line:

   <p><data:post.body/></p>

   In many templates, this section will look something like this:

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

   However, the class of the containing DIV section may be called something different, such as:

   div class='post'
   
   div class='entry'
   
   div class='post-body entry-content

   In the case of third party templates, this could well be something else entirely!
   
   The best way to locate this is to search for <data:post.body/> using the CTRL+F function in your browser, then take a look at the surrounding code to work out where you need to edit.
6. Once you have found this section of code, take a look at the code below. I've added some code in red, which is what you will need to add in your own template. As I have explained, the <div class='post-body'> section may be named differently in your own blog template, so do bear this in mind!

   <div class='post-body'  expr:id='"post-" + data:post.id' >
   
        <b:if cond='data:blog.pageType == "item"'>
           <style>#fullpost{display:inline;}</style>
           <p><data:post.body/></p>
        <b:else/>
           <style>#fullpost{display:none;}</style>
   
           <p><data:post.body/></p>
   
          <span id='showlink'>
           <a expr:href='data:post.url'>Read More......</a>
          </span>
          <script type='text/javascript'>
            checkFull("post-" + "<data:post.id/>");
          </script>
        </b:if>
   
        <div style='clear: both;'/> <!-- clear for photos floats -->
      </div>
   

   Before you attempt to save your template, I would advise you to preview your blog.
   
   If you have pasted the code correctly, you will see the test post you created earlier will now feature only the summary, followed by the "Read more..." link, like this:
   
   
   
   If you have pasted the code incorrectly, one of two things will happen: you will either be unable to preview, or your test post will appear in full, rather than as a summary.
   
   In either case, you should clear all edits you have made, and start again from the top: it's a far better idea to begin the process again, paying attention to every detail, than to try and edit the code!
7. After you have successfully made the changes outlined above, you can proceed to save your template.
8. The final step is to add a post template in your blog settings.
   
   This is the same code we used to add the content to our test post, though this time we will add this as a permanent template which will appear in your post editor each time you write a post.
   
   Go to Settings>Formatting in your Blogger dashboard, and scroll right down near the bottom of this page where you will see a text box for your post template.
   
   Inside this box, you must paste the following section of code:

   This is the summary
   
   <span id="fullpost">
   
   This is the rest of the post
   
   </span>

   Be sure to copy and paste this code exactly as you see it here. If you accidentally insert any extra spaces, extra characters or line breaks by typing this manually, you run the risk of breaking the operation of the script.
   
   Finally, save these settings, and enjoy the convenience of selectively summarizing your blog posts!

Using the Selective Expandable Posts Hack

For me, Ramani's selective post summaries hack has been the most effective method of summarizing my posts. However, when using this hack you may need to change the manner of your blogging habits slightly, and learn how best this can be used.

Here are some tips which I have learned through using this hack on a regular basis, which will probably be useful for you too:

• You must create and edit your posts in Edit HTML mode. The <span> tags which are included in your new post template will only be visible in Edit HTML mode. If you use the regular "Compose" mode, you may accidentally delete some of the required code, which will cause your posts to be displayed improperly.
• If you do not want to summarize a post, simply delete all of the post template when creating your post! In this case, there will be no "Read more" link beneath the post, and your complete post will appear on the main pages (ideal for short posts).
• If you are used to writing your posts in paragraphs using appropriate paragraph code, like this:

  <p>This is a paragraph</p>
  <p>This is another paragraph</p>

  you will need to wrap all of your content in paragraphs, and may need to add the appropriate paragraph tags to the lines in your post template too.
• When using this hack, you can easily implement Google AdSense code to appear in your post pages only, and can choose to display this within the body of the post itself, as well as above/below your post content.

As I mentioned earlier, this hack will only work for posts which you create after installing the required code and post template. Your existing posts will not be summarized unless you edit them to add the required code inside the post.

If you have a great many posts, I would advise you only to edit the posts which appear on your front page. So if you display seven posts on your home page, you would only need to edit the previous seven posts, if you would like these to be summarized. The reason I advise this is because in my experience, fewer people browse through your archives using the "newer/older posts" links than would search through using the blog search function. This means that your readers' experience would suffer little disruption from seeing older posts in their full form.

Troubleshooting

If ever you notice a "summarized" posts appears strangely, or other posts seem to disappear from beneath this on your main pages, the problem is most likely that you have accidentally deleted the closing </span> tag from the very bottom of your post. Don't worry if this happens, it is easily solved by adding that line right at the very end of your post!

Another possible problem Ramani has noted is that sometimes the "read more" link will appear on archive pages, even for those posts which have not been summarized. This issue is not yet resolved, though if I come across a definitive solution I will be sure to update this post

Final thoughts

This is by no means the only method you could use to summarize your posts (Jackbook has discovered seven different methods), though for most bloggers the selective method will be the most effective and easily maintained choice.

I hope that my explanation of Ramani's excellent hack will help you implement this version of post summaries in your Blogger layouts blog.

If you have any more hints or suggestions for using this hack, please feel free to leave your comments below.