One of the things I'm doing to make this site better is to implement Expandable Post Summaries. Two of my favorite food blogs, Rasa Malaysia and Steamy Kitchen, implement this on their sites. Basically, when you have posts that start off with a little bit of text and then see a link to "Read More" or "More after the jump" or "Continue reading", that is an Expandable Post Summary. The text before the link is the summary, and the content after the link is the remainder of the post.
The benefit of Expandable Post Summaries is faster loading times for the homepage, archive pages, and search results page. This is because most of the yummy pictures and voluminous text on each post are hidden behind each post's link instead of on the front page. Another benefit is less scrolling, especially when a search results in several posts. (Try searching for a common ingredient used in the House of Annie, tomatoes!)
Unfortunately, Blogger doesn't make it easy to get Expandable Post Summaries right. The process is NOT for the faint of heart or the impatient!
In order to implement Expandable Post Summaries, you have to be comfortable with hacking the Blogger template. Now, I'm a fairly intelligent person who likes technical challenges. But I am not a programmer. My HTML skillz are basic at best. My knowledge of JavaScript is even less. But at least I know that Google is my friend ;-) So a-hacking we will go!
Recipe for Hacking Blogger to Add Expandable Post Summaries
Ingredients:
(Always remember to back up your template before you hack away. You'll be able to back out much easier if something goes wrong.)
Blogger Help's article on creating Expandable Post Summaries is very straightforward. Just follow the instructions and you can have "Read more" show up on every new post. Unfortunately, it shows up on every OLD post as well! So that's not going to work.
So I took it a step further and followed the instructions for adding Conditional Expandable Post Summaries, as detailed by Blogger Magz. You edit the HTML of your Blogger layout, click the Expand Widgets checkbox, and insert this text right before the </head> tag:
<b:if cond="'data:blog.pageType">
<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 you replace
<div class='post-body'>
<p><data:post.body/></p>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
with this 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("post-<data:post.id/>");
</script>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
Finally, save the template.
Now, the "Read more" link only shows up when you add the <span class="fullpost"> and </span> tags. Nice. The only problem is, when you click the link, the page loads from the top instead of where you left off. That can be confusing.
We'll deal with this problem, and more, in Part 2...
Aloha.
Thursday, March 20, 2008
Hacking Blogger to Add Expandable Post Summaries, Part 1
Labels:
Tech
Subscribe to:
Post Comments (Atom)
©2006-2010 House of Annie. House of Annie's text and photos are licensed under a Creative Commons 
7 Comments:
Yes, yes, I need to learn part 2...I don't know how to get it to exactly where it left off...:)
Hi Annie/Nate
I tried adding the 'read more' as per your instruction but everytime i try to preview or save, it says something to the effect about the code was not correct (or something like that). Any thought?
Thank you in advance.
Farina
Hi Farina,
I will work with you offline to help you get it working...
hi there,
thanks for your post, i tried it and i can't seem to get it to work when
i type in the span class="full post" /span I left off the brackets)
what happens is the "read more" shows up at the end of my post.
i undo and redid per your instruction and the instruction on blogger magz (that's where I got your link).
anyway you can give me pointer. I can't figure out what I did wrong.
thanks
Jeff
@Jeff - I just want to make sure, you're putting the <span class="fullpost"> where you want the "Read more..." to show up, not at the end of the post where you should only be putting the </span>
Right?
The invalid xml error is due to this line:
for (var i = 0; i < spans.length; i++) {
The XML interpreter sees the less than sign as the beginning of a new tag. Replace the less than sign with its equivalent. Unfortunately this comment field converts the equivalent so I can't just type it here, but it's & followed by gt followed by ; all run together. See this page for more info. HTML Character Entities
The other problem I see with this is that it's looking at all the span tags on the entire page. If you put the span tag in only one blog post, it will still show the Read More link for all the other posts on the page because the variable found is equal to 1.
I haven't worked out a suitable solution to this yet, so for now I'm just putting "Go to full post" at the end of all posts.
Thanks for the good info, though.
Tony
@Tony - thanks!
Post a Comment