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:
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:
Then find this (don't forget to check "Expand Widget Templates") (doesn't have to be exactly like it, but very similar):
and replace it with:
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:
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.
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('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].className == 'fullpost') {
spans[i].style.display = 'none';
found = 1;
}
if (spans[i].className == 'showlink') {
if (found == 0) {
spans[i].style.display = 'none';
}
}
}
}
</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='"post-" + 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("post-<data:post.id/>");
</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.
