Ubuntu / Linux news and application reviews.

Blogger Read More Post Summaries Fix

Last week i wrote about a method to add Read More (Excerpts) on Blogger but that adds a "Read more" link to all the posts so you cannot manually set which posts have a "Read more" link and which don't.

The Blogger help leaves us with an unsolved trick:

Disadvantages: Requires changes to the posts themselves, rather than to the template only. However, the "read more" link is in the template, so it will appear regardless of whether a post has been truncated or not. (Modifying this feature is left as an exercise for the reader.)


But i recently came across a blog post that solves that issue, and i've tested it on my blog and works ok. Here is how to have selective expandable post summaries:

Go to Blogger's Dashboard > Layout > Edit HTML and find </head> and add this 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>

Then find this (don't forget to check "Expand Widget Templates") (doesn't have to be exactly like it, but very similar):
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

and replace it with:
<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>
<p><data:post.body/></p>
<b:if cond='data:blog.pageType != "item"'>
<span class='showlink'>
<div class='more-link'><a expr:href='data:post.url' expr:title='data:post.title' rel='nofollow'>Read more!</a></div>
</span>
<script type='text/javascript'>
checkFull(&quot;post-&lt;data:post.id/&gt;&quot;);
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Everything will work like in my previous post, meaning that when you want to have a read more link in your posts, you will write the post like this:
This is the beginning of the post that will show up on the main page 
<span class="fullpost">
And this is the rest of it that will only show up when clicking the post title or read more link.
</span>

And when you don't want a post to have a "Read more" link, simply don't put the fullpost span in the post body. For complete details of using it, after making the above changes, visit Read More (Excerpts) on Blogger.