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:

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">
function expandPost() {
var currentText = this.innerHTML;
if (this.nextSibling.nodeName == "#text") {
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;

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">

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.


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


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

  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...

  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:

  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.


  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[

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


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

  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!

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

  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.


  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.


  12. Excellent post by Lenin, i tried this "expandable post summaries" with ' 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.

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

  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

  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.

  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.


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

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


Post a Comment

Comments are moderated very strictly

Popular posts from this blog

What Is the Difference Between Hardcover and Paperback?

Today, my reader, Rahman contacted me with a doubt:

Dear Lenin, would you explain why there are two types of books: hardcover and paperback?
This is quite a simple affair and there are explanatory articles to be found at various places on the Net. Here is my addition.


A hardcover aka hardback is a book bound with thick protective cover, with usually a paper or leather dust jacket over the main cover. The aim of hardcover is protection and durability. These books are mainly for long-term use and collectors’ editions. Hardcover books last far longer than the corresponding paperbacks. They do not get damaged easily thus making them perfect for reference guides, great literary works, etc.

In addition, there is a difference in the type of paper used to print hardcover books. The paper used is long-lasting acid-free type. Acid-free paper has a pH value of 7 (neutral) which makes it highly durable. The papers are stitched and glued to the spine.

Hardbacks are prepared for commercial …

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 key-combination, Ctrl + Num…

What Is the Meaning of the Word 'Ghajini'? Story and Trivia of Aamir Khan's New Film [Special]

[Special Entry]

Aamir Khan's latest film is titled a little weirdly for the taste of Hindi filmgoers. 'Ghajini': They have never heard of such a name, and such a word never existed in Hindi or in any other Indian language.

The name Ghajini is the name of the villain of the film. In Tamil version, the name of the villain was Laxman.

As a Tamil moviegoer, I have already watched Ghajini and know the story in full.

So, What Does the Title Mean?

In Tamil, the title of the film is inspired by the story of Mahmud of Ghazni, an ancient invader of India. This person was so persistent in invading India that he continued trying after several failures. In the film too, the protagonist is such persistent in finding out and killing the villain of the film, who had killed his girlfriend, Kalpana (played by Asin). Aamir's Character (named Sanjay Ramaswamy in Tamil), is a short-term amnesiac, who cannot remember anything more than fifteen minutes.

You may ask then how the Ghazni became…