Professional Blogger, Wordpress, Joomla Templates

Thursday, January 10, 2008

Blogger Tutorial: Create Expandable Post Summary

I have setup several blog site using blogger or blogspot. I like it very much. But one most obvious thing I was missing is the option to create expandable post summaries. By default blogger shows full story in the first page and all comments in the own page of the post when you click the post's title. The main problem is most of the time people leave after reading the article. They do not view the comments and hence can't participate on the discussion about that post. Moreover, the first page become longer and longer with full stories. I was seeking for a solution where only few lines will display in the first page as introduction and people will read the full story & comments after clicking "Read More..." link. In help.blogger.com I have found a solution. But it has few disadvantages. Main problem is - you have to write a css code manually with your each post. It will be the worst situation if you already have posted lots of articles. Then I have developed a solution with javascript where you do not need to worry about creating post summary. It automatically hides the rest of the post. Here you go -

In this method first paragraph will be used as post summary. You will view the full post after clicking "Read More..." link. Note, you must enable post pages in order to using this feature. Also backup your template html before editing it.

Now follow these instructions:

1. Go to your blogger setting panel -> Template -> Edit HTML

2. Check on "Expand Widget Templates"

3. Search for </head> & replace it with following javascript code:

<script type='text/javascript'>
function truncate_body (postid) {
var id = document.getElementById(postid);
var postbody = id.innerHTML;
var len = postbody.toLowerCase().indexOf(&quot;&lt;br&quot;);

if(len&gt;0)
postbody = postbody.substring(0, len);

id.innerHTML = &quot;<p>&quot; + postbody + &quot;</p>&quot;;
id.style.display=&quot;block&quot;;
}
</script>
</head>


4. Search for <p><data:post.body/></p> & replace it with following code:

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"postid_" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'> truncate_body(&quot;postid_<data:post.id/>&quot;); </script>
<p>
<a class='read_more' expr:href='data:post.url'><b>Read More...</b></a>
</p>
<b:else/>
<p><data:post.body/></p>
</b:if>



That's it. Now let me describe the code. It is not necessary to understand the code. You may skip it if the above procedure works for you.

In the 4th step I have created a div with an unique id. Then a javascript function truncate_body is called which is declared between the head of the html. In the function call it passes the id of that div.

The truncate_body function loads the full post into a varible name postbody. Then it search for the index of the fist occurance of html &lt;br from the post. I searched &lt;br instead of <br /> in order to avoid errors. If the &lt;br is found in the body, it creates a sub string from the post's beginning to &lt;br position & replaces the postbody to that substring.

If in your blog that code do not find &lt;br then search for &lt;p or check the html source for solution.

Hope this will work for you. But If it does not work then just post a comment here with your blog url. I will try to solve it.


Update (18 Nov, 2009):
I am very glad that all of you like my tutorial and using it. BTW, if you need professional blogger or wordpress template then check here. You will love this collection.


Read More:

58 comments:

Pam Hoffman said...

I gotta tell you, as a reader, I rarely click on the 'read more' type link.

I thought about doing what you write about with my Interviews - primarily to drive traffic to another site. I actually DID do that with my very first one.

I just broke off the text at some arbitrary point, added the rest to the other site and created a link in the blog post...

When I started reading other blogs and realizing that I just don't bother to go to the next 'page' I realized that I probably WANT the whole article on my blog post.

The article has to be REALLY interesting for me to click thru. Even then it's a bit of a toss-up.

Just so you know,

Pam Hoffman
http://seminarlist.blogspot.com

p.s. if the post is really long, that's ok with me.

Zakaria Chowdhury said...

Thanks a lot for your comment!

Only new readers may leave without reading the full story. But the returning readers know "Read More..." is not linked with different site.

If the article is not much interested for a reader why should I display it with full story. This link helps my site neat & clean.

With this technique I get serious readers who really interested about my posts & participate by leaving comments.

Bright_Obsidian said...

Man, I don't know, I was never bothered by the "read more" links, I mean, with everybody on broadband now, it's not much of a big difference whether the rest of the post appears instantaneously or if it takes 2 extra seconds to go to the page with the full text ... but still, I'm not saying that this is worthless, but I wouldn't bother messing with my wordpress code to add it! :D thanks anyways!

Zakaria Chowdhury said...

@Sheesh Kebab
Thanks for your comment. This "Read More..." is not only for reducing front page height, but also to take serious readers into the discussion going on by comments. Because in the front page it does not show comments. So a reader do not know what the other readers are discussing. They rarely click Comments link from the front page.

Commenting is important for me to know the feedback of my readers. It also help to get more attention of search engines.

In this site I have changed few codes. Now the first post is displaying the full story in the front page. Other posts are displaying the fist paragraph & a "Continue..." link. I did this to attract readers attention by first post. If they like the first one they will be interested to read other posts by clicking "Continue..." link.

By the way, this tutorial is not for wordpress, I have developed for blogger or blogspot sites.

Starraynight said...

Thank you!! This is wonderful, and so much more simplistic than the tutorial blogger offers in their help section!

Rohit Dhawan said...

Hi There

Thanks! That code really worked. However I was wondering if I could include the first 2 or 3 lines of my posts, instead of truncating the whole body...

Thanks in advance
Rohit

http://www.blog.punjabi-lyrics.com/

Larry Cebula said...

Thanks for your efforts but it is not working for me. I get the "Read More" link at the bottom of the post no matter how many paragraphs long, rather than at the bottom of th first paragraph. I tried it out on a defunct blog at http://hist201.blogspot.com/ . If I can get ti to work I hope to install it on my main blog at http://northwesthistory.blogspot.com/

Zakaria Chowdhury said...

Hello Larry,
I have visited your site http://northwesthistory.blogspot.com/ and have found that you did not place javascript code that I wrote in step 3.

Follow the step 3 again.

Thanks for trying it.

Larry Cebula said...

Thank You, Zakaria, I tried it again and it works like a charm! But is there a way I can turn it on and off for different posts? I would like a 2-3 paragraph post to display all at once, but longer ones to trigger the "read more" feature.

Pete said...

I tried this on my "Soap Box" blog (which is a Classic Blogger template and hosted on an external ftp site) but couldnt get it all to work - i could either get a "read more" link (which didnt link to anything) at the bottom of an untruncated post, or all the posts would be totally truncated with no way to read them.

Experiments with html & java will continue...

Zakaria Chowdhury said...

@Pete
I am sorry, this tutorial is not for classic blogger template.

Christopher Sam said...

great help. thanks!

Sogni a Colazione said...

thanks so much ... I was looking for this! I just added to my own blog http://sogniacolazione.blogspot.com and it works fine! (The blog is in italian)

David G said...

I like the idea of doing this, but when I make the 2 edits to dgoldstrom.blogger.com, I get a blogger error as I try to save the page. It could be a problem that has nothing to do with what your code is doing... as I get this error message immediately:bX-btcv0r

Roronoa Zoro said...

hello there
i have a lil' prob coz the codes you give us is a new blogger code. could you please give me the classic blogger code, coz i'm toying around with classic code since i'm too slow to learn the new blogger code. thanks.

http://warzone17.blogspot.com

Anonymous said...

I've just added it to another blog. I modified the script as in some of my post the new lines comes too late or too fast. The I added some lines in the script to cut the post after 500 characters.

The blog is http://dreamsatbreakfast.blogspot.com

Bonedoc said...

Hi!
Won't work on my blog. Tried it several times and i end up in all sorts of error.

Any help?

Thanks

Anonymous said...

Thank you..
Very useful trick. I have so many blogs, some blogs have 5 or more large pictures in every post.
Can you imagine how tall is my post without this trick..

Thanks..

Ben Chapman said...

Well done! Thanks! Ben

Anhedonio said...

Thanks A lot man, i just put in my blog (the best argentinian one!!! =))
Greetings!

adubtheengineer said...

Best tutorial for this hectic problem. Very easy to understand and quick to do.

Holly said...

Found this post when trying to find a way to make expandable post summaries on my blog.

Your tutorial worked great and was so easy to do. I was very frustrated with many of the articles I found on this subject.

It worked like a charm, but I removed it until I can find out how to make it post a few lines/first paragraph/so many characters of my entire post. More than just a title in other words.

Do you have an add, or instructions, for showing more than just the title?

Thanks so much!

Dhanesh V said...

Thank You very much........

The A of DNA said...

First of all I love how your code applies them to all post so that you do not need to go into each post manually. But is there ANY possible way to edit the code so that you can have the summary break where you want it...instead of after the first break in the page?? Is there a code I COULD manually input so that it can have the summary end?

the orange party said...

This is a great solution - but on my blog it only shows the headline and read more on the index page, not the first paragraph.

http://theorangepartyblog.blogspot.com/

On the HTML of my posts there doesn't seem to be br or p tags for it to find.
Can you help with a solution?

BARBARA BOWEN said...

Hi....thanks for the help. I'm a new blogger and have only two posts posted so far.
I inserted the code and it works...
One of my posts shows a paragraph before "read more," as expected.
The other one, however, shows only the title (not the first paragraph) before the "Read More" notation.

Can you help me revise this so that the first paragraph shows before "read more" ??

allyhanafi said...

ive been tried so many times but it not works.

this is my url.. http://djdiddy.blogspot.com

here is my email.. phyneballerz81@yahoo.com..

hopefully u can solve my problem. tq

Stan Jones said...

Thanks very much Zakaria. It works beautifully! One small problem: I get 'Read More ...' twice which I think is a remnant of another way I tried to do this.

http://movieflics.blogspot.com/

Stan Jones said...

One other thing, Zakaria. Do you have any idea how to do Expandable Post Summaries in CSS or HTML?

Unknown said...

Thanks mate.. it works on my blog..

Cheers
Ashish

Admin said...

How does one change where the division takes place?

I'd like to show the first two or three paragraphs in the summary instead of just the first.

james said...

You're the best!!!! i was looking at 5 websites and this is the best of them 5 easy fast and good result!

Os-Pir@T@--AdM-- said...

..yes thankx a lot . very useful script.
simple, fast and very useful =)=)....so..
I have doubts that I would take before implementing this script on my blog:
I would like to know how to change the link "read more" to place an image or a banner instead of "read more"

Many thanks in advance !

glemb said...

yeah... yeah...
whatever people says...
but is still worth for me, since it make my blog page look simplier...
and you know? simple is beauty...

heh.. heh.. heh...

World of Warcraft Gold Guides said...

good post :)

Anonymous said...

great post. Here is another version that is I found to be very good. it is very simple and only uses plain CSS rather than javascript. (i found javascript caused me problems)

Check this one out if you are still looking for something that works for you:
http://simplerthanyouthink.blogspot.com/2009/04/blogger-expandable-post-summary.html

Anonymous said...

Here is the hyperlink (I did not do it correctly before)http://simplerthanyouthink.blogspot.com/2009/04/blogger-expandable-post-summary.html

Wenx said...

Thanks for the tip. Now my blog looks totally awesome! Mentioned you on my blog btw. God bless...

Wenko
http://DeathToMyCreditCards.blogspot.com

Unknown said...

Thanks a lot for the great tutorial. Very easy to understand (and I had a decent amount of HTML knowledge anyways). Works wonderfully for me. Thanks!

nipsy said...

You just saved my sanity with this blog!! I've just spent four hours earlier today trying to figure out how to shorten my posts, which can become long and simply look odd. I finally broke down and asked on a humor blogger forum and they sent me here. Took me two tries and a few tweeks to some photos, and I'm all set. Thank you so much!!

ramgopal said...

Sir, I tried in my blog www.sramgopal.blogspot.com. But on entering the code my blog displayes this messages, " Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The element type "html" must be terminated by the matching end-tag "". It says could not be saved. Kidly help me.

ramsgopal said...

Sir, I tried in my blog www.sramgopal.blogspot.com. But on entering the code my blog displayes this messages, " Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The element type "html" must be terminated by the matching end-tag "". It says could not be saved. Kidly help me.

Fifi Kapri said...

Thank you for this code. I got it to work on my site! Yeah! Now all I want is a way to control after how many lines or which paragraph I would like to place the "Read More" link. Any chance that is coming?

Thanks again!

King Beetle said...

Great tip!

I made one small change though to suit my own purposes; I changed the script so it cuts off the post when it sees <cut> in the HTML rather than looking for <br />.

Then I can place a <cut> into the post where I want the post to be separated rather than having it always cut the post off at the first <br />.

I can have as much or as little of the post displayed before the link.

All I had to do was edit the line:
var len = postbody.toLowerCase().indexOf("<br");

to say:
var len = postbody.toLowerCase().indexOf("<cut");

Anonymous said...

Interesting post you got here. It would be great to read something more about this topic.
BTW check the design I've made myself High class escort

Anonymous said...

Who knows where to download XRumer 5.0 Palladium?
Help, please. All recommend this program to effectively advertise on the Internet, this is the best program!

Unknown said...
This comment has been removed by the author.
Unknown said...

This workedon myblog in progress

I just wanted to see if it would work. Thanks its much easier than other fixes ive seen.
I agree I wouldnt use it all the time - I will use it for blogs that im not bothered if people click thru or not.

M. Saef Ullah Miah said...

Thanks for the psot, it worked for me...

Anonymous said...

please check my blog for read more function
http://sajinkn.blogspot.com

plz mail me at kn.sajin@gmail.com

Term Papers said...

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards

Million Dollar Baby said...

i did it but does not show a preview of my post...just the read more link..and the image....but i kind of like this...makes ppl have to click to read post after reading an interesting title
used it for www.earnmoneyaffiliates.com....not promotting the site...becuase it is not set up yet...check out how the code works on my site...

noypi said...

Thanks for this tutorial. It's different from what I read from others. Let me try it out....

Anonymous said...

Traderbest.com
Traderbest.com is an online firm that offers investment trading ideas, investment opportunity and financial services such as online stock trading newsletters,IRA trading ideas, Roth IRA, mutual funds, stock quotes, stock market research and online investing concepts.
Traderbest.com ,discount brokers, mutual fund, no fee ira, best online trading, stock broker, free stock quotes,stock investing, discount brokerage.

Anonymous said...

Lowermyrtax.org

Lowermyrtax.org #1-rated, Free tax Tips and Information.Easily prepare your tax return and file income taxes online using free tools.

lowermytax, lowermytax.org, tax, taxes, tax software, free tax filing,tax preparation, online taxes, free tax software, tax returns, efile, free efile,e file, e-file, online tax filing, taxes online, income tax software, tax forms,tax deductions,online tax filing, taxes online, income tax software, tax forms,tax deductions.

Anonymous said...

Makersecret.com

Car Talk Advice on Markersecret.com: We tell you what you need to know about common repairs,as well as answering your questions and providing recommended mechanic listings for your area.

Car Talk, car maintenance advice, auto maintenance advice,car care tips, auto repairs, oil changes, brakes, coolant, timing belts, tire pressure, spark plugs, do it yourself advice, recommended mechanics, find a good mechanic, search car talk columns,
interactive car, car basics, general automotive advice, Makersecret.com

Anonymous said...

Search Jobs in Gulf – Apply to jobs in Middle east, Dubai. Post your resume and find your dream job in Middle East Now on Gulfdice.com! Find career openings in top companies in Middle East, Gulf Region, Dubai, UAE, Saudi Arabia,Qatar,Kuwait,Oman,Bahrain.Post your resume, jobs in gulf, job site in middle east, it jobs in Gulf, software jobs middle east, it jobs in gulf, jobs gulf, v jobs, job search in middle east, online jobs in middle east,accounting jobs in gulf, part time jobs in middle east, banking jobs in gulf, finance jobs in middle east, jobs and careers in gulf, call center jobs in middle east, marketing jobs in gulf. Search and apply for jobs in Dubai, UAE, Saudi Arabia, Qatar, Kuwait, Bahrain, Egypt, Jordan, Morocco, Lebanon.
Gulfdice.com Most Simple job site in the Middle East.
www.gulfdice.com

hsn said...

Find and share coupon codes and promo codes for great discounts at thousands of online stores.
http://www.megacouponsite.com