Blogger Tip - How to create expandable post summaries selectively

Several readers have asked me about how I've managed to
create "expandable post summaries" with this Blogger blog.
They thought the feature was only available for Wordpress!

It can be done easily...

In fact, you can get the tip from Blogger Help under this article:

How can I create expandable post summaries

The only problem is that - If you follow the above method,
you'll end up seeing the "Read More" link in EVERY POST.

In other words, you won't get the flexibility to use the
"expandable post summaries" SELECTIVELY.

You can solve this problem with a simple hack. I've done
it on my template successfully.

This is how it's done:

Login to your Blogger account, go to "Template" and then "Edit HTML". Before proceeding any further, be sure to "Backup" your Template by clicking on "Download Full Template".
After that, locate the </head> tag. Next, add the following code just BEFORE it.

<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<b:else/>
<style>.fullpost{display:none;}</style>
<script type='text/javascript'>
function checkFull(id) {
  var post = document.getElementById(id);
  var spans = post.getElementsByTagName(&#39;span&#39;);
  var found = 0;
  for (var i = 0; i &lt; spans.length; i++) {
    if (spans[i].className == &#39;fullpost&#39;) {
      spans[i].style.display = &#39;none&#39;;
      found = 1;
    }
    if (spans[i].className == &#39;showlink&#39;) {
      if (found == 0) {
        spans[i].style.display = &#39;none&#39;;
      }
    }
  }
}
</script>
</b:if>

Next step: Find the CSS style tag of your post content as follows:

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

Erase the above CSS style tag and replace with the following code.

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

Finally, save your Template.

You're now ready to implement the change...

Whenever you want to use this "selective" feature you'll need
to use this code while writing your post:

<span class="fullpost"></span>

<span class="fullpost"> Should go where you want your post to cut off and for "Read more" to appear.

Whereas </span> should be placed at the END of your post.

If you come across any problems in the course of making changes
in your blog, just give me a shout in the comment section and
I'll see what I can do to help.

Tags: Blogger+Tip, expandable+post+summaries