Skip to main content

Expandable Post Summaries on Blogger Using JavaScript

I hope you read the first part of this article, in which the normal way of expanding post summaries was discussed as a result of a reader query. Here we will see a better, more effective way to expand your post summaries—using JavaScript.

Haven’t you seen professional blogs in which the home page has a number of posts with only summaries and a ‘Read More’ or ‘Continue Reading’ link at the bottom? This is one of the signs of a good blog design. Blogger, by default, doesn’t offer this feature. So, we will see how we can make this available with a JavaScript tweak. Blogger help also has provided the same script.

1. Adding The Expansion Style

In the New Blogger template, go to Layout->Edit HTML and find the tag, <b:skin><![CDATA[. After this tag, add the following code:

.fullpost
{
display:inline;
}
.summary
{
display: none;
}
2. The Expansion JavaScript

Now, you have to add the following JavaScript snippet in the <head> tag, right before the <b:skin> tag.

<script type="text/javascript">
//<![CDATA[
function expandPost() {
var currentText = this.innerHTML;
if (this.nextSibling.nodeName == "#text") {
this.parentNode.removeChild(this.nextSibling);
}
if (currentText == "Continue Reading...") {
this.innerHTML = "Summary Only<br />";
this.nextSibling.className = "fullpost";
}
else {this.innerHTML = "Continue Reading...";
this.nextSibling.className = "summary";
}
}
function postExpansion() {
var anchors = document.getElementsByName("ExpandPost");
for (var i = 0; i < anchors.length; i++) {
anchors[i].onclick = expandPost;
anchors[i].href="#" + i;
}
}
//]]>
</script>

Now, you have to replace the <body> tag with
<body onload='postExpansion();'>.

You can change the strings, 'Continue Reading...' and 'Summary Only' with any other string you like.

3. Modify Post Template

Now, you have to modify the default post template, by going to Settings->Formatting. Add the following code to the post template text area:

<a href="#" name="ExpandPost">More...</a><span class="summary">

</span>
Once done, the above code will automatically appear on your post editor.

4. Enabling the Trick on New Posts

Now, whenever you start a new post, add the summary of the post above the code shown above. The rest of the post has to be added in between the two span tags, i.e., right above </span> tag.

Conclusion

I believe it will be helpful to you. I hope I didn’t err anywhere on the code. It worked just fine when I tested it. However, if you find any trouble doing this, please let me know by the contact form. Also, make certain that you backed up the template before you apply the tweak.

Copyright © Lenin Nair 2008

Comments

  1. its a completed trick and tips for blogger that i can find in here.thank you

    ReplyDelete
  2. Thank you so much! It is working!

    The only problem is that when I change the format of the text from "aligned left" to "aligned left and right" the java code does not funtion any more.

    Is there a fix?

    Thank you again very much...

    ReplyDelete
  3. It may well be some issue in the JavaScript you implemented. Otherwise it should not work that way. Text alignment doesn't affect the working of the JavaScript. If you are getting troubles, you may try the other method of expandable post summaries, without JavaScript: http://cutewriting.blogspot.com/2008/09/expandable-post-summaries-on-blogger.html

    ReplyDelete
  4. I could not get it to work in either of my blogs. But both of them had the "head" part AFTER the b skin part...would that make it not work????

    Sorry...newbie here.

    Kathy

    ReplyDelete
  5. Kathy, may be you included a script part right after the <b:skin> part. But it has to be included after the entire b skin tag which will be like: <b:skin><![CDATA[

    ReplyDelete
  6. WHEW!!!! I figured it out and I say THANK YOU !!!!!

    Kathy

    ReplyDelete
  7. Good to know that, Kathy, would like to see the site you implemented it in. Your profile doesnt give access to the site.

    ReplyDelete
  8. Thank you for letting me know my profile was not public, I went straight away and fixed THAT. My blogs are now on there and once again, thank you for all you do for the community!

    ReplyDelete
  9. Yes, I found it. It's a pleasure to help people like you.
    Thanks for the comments.

    ReplyDelete
  10. Hey Lenin, it doesn't really work. When you click on MORE it sometimes goes to CONTINUE READING but most of the time it simply reloads the blog and leaves the post at MORE, without opening the summary.

    What I'd really like is for it to open the post in a new window containing that post only.

    Michael

    ReplyDelete
  11. Michael, I tested in various blogs. In fact, for it to work, the blog should be using the new blogger layouts structure. Make sure yours does. Also, the blog has to load fully before the javascript code to work, otherwise, it will simply reload. If you still get troubles, let me know. We can fix it up. If you send me the code of your blogger or invite me to be the admin, I will see what the problem is.

    Lenin

    ReplyDelete
  12. Excellent post by Lenin, i tried this "expandable post summaries" with 'Blogger.com help', but it didn't worked, shown some error, then i tried this one amazingly, i had succeeded in just 5 minutes with this simple HTMLcode.. Thank you so much Mr.Lenin.
    Regards,

    ReplyDelete
  13. Satheesh, thanks for the comment. It's my pleasure to help you out.

    ReplyDelete
  14. I am very new to this, and for some reason every time I try to implement this is doesn't work. As I am new, could you please suggest what I may be doing wrong is simple instructions. Any help would be very appreciated. I have been on this computer for almost 5 hours trying different hacks suggested by many forums and none of them seem to be working.

    Thanks again

    ReplyDelete
  15. Hi girlon tour, you must be doing something wrong with it. Are you using blogger layouts? If not, then that may be the problem. I tested it several times before posting here. So it should work normally. Let me know your blog details so that I can do a check. Contact me.

    ReplyDelete
  16. Thanks Lenin. I see that the problem was that the blog was so huge it takes time to load up. I have used it successfully! Beautiful work.

    Michael

    ReplyDelete
  17. Good to know that it worked for you at last, Michael. Thanks for your comment.

    ReplyDelete
  18. Thank you so much. I looked through various pages trying to figure this out and yours worked like a charm.

    ReplyDelete

Post a Comment

Comments are moderated very strictly

Popular posts from this blog

Power of Short Sentences

Post dedicated to Thomas Hardy (see History Today below). There are monster sentences like the one you encounter as the first paragraph of Oliver Twist by Charles Dickens . One of my friends, whom I am getting equipped for his IELTS ( what is this? ), told me that the examination recommends long sentences. In writing classes also, I guess it’s longer sentences most tutors promote. But indubitably shorter sentences are more powerful . We will see why. Take a long sentence for instance: Tom Cruise, one of the finest actors in the whole world, is perhaps the most powerful celebrity to exist ever according to Time Magazine, but many people still dispute this fact and point out that there are more powerful and popular actors than Cruise, though they were unsuccessful in providing the total number of fans, who liked the films of those actors. This is a long sentence and it is very confusing . Though it has a logical construction and conveys a meaning, it falters in many occasions and seems

Creative Writing: Crafting Characters With Emotional Appeal in Mind

When you read the greatest fiction works ever, have you ever asked what was so compelling about them that you not only kept reading it, but you ended up reading all other major works of the writer? It may well be because the writer touched your emotional quotient quite a bit. Every reader has a unique taste . Some like to read suspense thrillers , some tender love stories, and some others dark horror and bloodshed stories . That’s why there are all sorts of genres out there. When a writer gives you what exactly you want, you will keep reading. Here we come to the emotional appeal. Character Imperfection Perfect characters may not always be the upshot of a writer’s deliberation. It may well be due to ignorance . Usually the upcoming writers take it for granted that if they create perfect characters, they will be able to garner a bigger audience . It is not true. You have to ask yourself what a character would do in a particular situation. Perfect characters—perfect gunmen, perfect

Another Tiny List of Confusables

Earlier, you may remember we published a list of confusable words . Here we are again, with such a list of words. Abjure/Adjure: Abjure means "to formally renounce (give up) something" such as a position. Adjure on the other hand means 'to appeal to' or 'solemnly order'. The governor decided to abjure his position due to political pressure. Normally, adjuring to the subordinates doesn't give many results. Amount/Number: Use amount when you have uncountable subject. Use number when it is countable. The amount of love one gets depends on the number of friends one has. Appraise/Apprise: Appraise is the word applied to quantitative evaluation of something. Apprise means 'communicate' or 'inform'. Appraising diamonds is the work of an expert. Joe apprised me of the schedule of events. Attorney/Lawyer/Solicitor: These terms are highly misinterpreted and confused by many people. Let me clarify. In the US, an attorney is any member