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

5 Simple Ways To Improve Your Writing

As writers, we’re always pushing the envelope to express ourselves better than we did before. However there are times when we plateau, when our writing just doesn’t feel natural. Worse yet, there are times when we can’t get a good paragraph out. Those are times when we start thinking about pushing ourselves and our writing. When you need to tweak and boost your writing up a notch, it’s always good to try something constructive.  For those who could use a couple of tips, here are a few that are sure to help improve your writing and keep it from going stale. 1.Imitate Different Authors If you read other writers for inspiration, why not actively imitate their writing? Once you walk in another writer’s shoes for a bit, writing as they write, you get an idea on how to approach writing about things in ways you normally wouldn’t.  Moreover, it will force you to pay attention to what makes someone else’s writing style unique which, in turn, will help you find ways to make your