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:
2. The Expansion JavaScript
Now, you have to add the following JavaScript snippet in the <head> tag, right before the <b:skin> tag.
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:
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
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; } |
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> |
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
its a completed trick and tips for blogger that i can find in here.thank you
ReplyDeleteThank you so much! It is working!
ReplyDeleteThe 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...
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
ReplyDeleteI 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????
ReplyDeleteSorry...newbie here.
Kathy
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[
ReplyDeleteWHEW!!!! I figured it out and I say THANK YOU !!!!!
ReplyDeleteKathy
Good to know that, Kathy, would like to see the site you implemented it in. Your profile doesnt give access to the site.
ReplyDeleteThank 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!
ReplyDeleteYes, I found it. It's a pleasure to help people like you.
ReplyDeleteThanks for the comments.
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.
ReplyDeleteWhat I'd really like is for it to open the post in a new window containing that post only.
Michael
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.
ReplyDeleteLenin
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.
ReplyDeleteRegards,
Satheesh, thanks for the comment. It's my pleasure to help you out.
ReplyDeleteI 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.
ReplyDeleteThanks again
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.
ReplyDeleteThanks 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.
ReplyDeleteMichael
Good to know that it worked for you at last, Michael. Thanks for your comment.
ReplyDeleteThank you so much. I looked through various pages trying to figure this out and yours worked like a charm.
ReplyDelete