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

En Dash, Em Dash, and Hyphen

We have three types of dashes in use: The hyphen, En Dash, and the Em Dash. In this post, we will see how to use them all correctly. Hyphen (-) The hyphen is the minus key in Windows-based keyboards. This is a widely used punctuation mark. Hyphen should not be mistaken for a dash . Dash is different and has different function than a hyphen. A hyphen is used to separate the words in a compound adjective, verb, or adverb. For instance: The T-rex has a movement-based vision. My blog is blogger-powered. John’s idea was pooh-poohed. The hyphen can be used generally for all kinds of wordbreaks . En Dash (–) En Dash gets its name from its length. It is one ‘N’ long (En is a typographical unit that is almost as wide as 'N'). En Dash is used to express a range of values or a distance: People of age 55–80 are more prone to hypertension. Delhi–Sidney flight was late by three hours. In MS Word, you can put an En Dash either from the menu, clicking Insert->Symbol or by the k

4 Effective Ways to Write About a Boring Topic

  With the plethora of interesting topics to write about, you’re fortunate enough to get the “boring” one. While it can be a pain for many writers to wind up with such a task, I’m telling you now there are ways to make yours more interesting than it is. So if you find yourself stuck with the dreariest topic to fill in a blog about, don’t fret. Here are the four best ways to unburden yourself. 1. Never a boring topic, only a boring writer. Here’s the hard fact: It’s never about the topic being boring. It’s about the writer making it boring. For instance, you’re supposed to write about aquariums. I know, how can you continuously make this topic interesting, right? Well, you’d be surprised just in how many ways you can make it an enticing read. Start by listing down the basic “what”, “where”, “when” and “how” surrounding the topic. You can ask (and research) about “What material was first used to make aquariums?” or even “How the first aquarium was built?” or “What are

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