June 12, 2008

How to create expandable post summaries in Blogger

I've been tweaking my blog template because I've already bored with my old default template that I use previously. While working on this template, I'm thinking that it may be cool to have my long post to be truncated and have the "read more" link.

I found the code from Blogger Help to do this. However, there is one issue with their code where the "read more" link will appear regardless of whether a post has been truncated or not. You can check it out at help.blogger.com on How can I create expandable post summaries?. If you have already read them, you should notice the disadvantages under the Note list which says:

  • Disadvantages: Requires changes to the posts themselves, rather than to the template only. However, the "read more" link is in the template, so it will appear regardless of whether a post has been truncated or not. (Modifying this feature is left as an exercise for the reader.)

Do you think it is a good exercise? So, how many of you have already solve this exercise? I've been browsing through pages of google results and found that currently, I didn't see anybody solve and publish the answer for this exercise with just the blogger layout code and without using other javascript code. I do the search because I'm a lazy coder where I don't wanna spend my precious time to reinvent the wheel. Anyway, after a few minutes of thinking, I got an idea on how to solve this problem. And as usual, I'm happy to share my solution with you.

Let's make it short now, here's the tutorial:

How can I create expandable post summaries that only show the "read more" link if post is truncated?
With this hack, you can choose to display a select amount of text from the beginning of each post as a teaser instead of showing the entire post on the front page of your blog. Then when people want to read the rest of the post, they can click a “read more” link to see the full post. This is very handy if you have lots of long articles all on one page. (Note that you’ll need to have post pages enabled in order to make this feature work.)

Step #1 - Edit your template code
To edit your template code, you have to go to your Layout > Edit HTML tab. Tick the Expand Widget Templates to have all the codes.



It is easier to copy all code and paste it to your text editor. To copy all code, click on the code area once and then press Ctrl+A to Select All. Press Ctrl+C to copy the selected codes, open your text editor and paste it in. Now you have your code ready to edit.

Add this code just before the <b:skin> tag on your template code:


<style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>



Here's how it should look. The yellow box in the image below shows your newly added code:



And then you have to find <data:post.body/> tag using Ctrl+F or find function in your text editor and paste this code just before the </p> tag, right after the <data:post.body/> tag:


<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;more&quot;'>
<a expr:href='data:post.url'>...<b>Read more</b></a>
</b:if>
</b:loop>
</b:if>



And the screenshot. The yellow box shows your newly added code:



My solution here is by checking the label whether it have "more" label. So, in every post that you decided to have the "read more" link, you have to add this label. I'm adding a loop to read the labels for each post and inside the loop, there is an IF statement to check whether it have the "more" label.

You should notice this line with:
<b:if cond='data:label.name == &quot;more&quot;'>
where the word 'more' in bold here is the label name. You can substitute this with any word you like but make sure you will only add that label to the post where you want to have the "read more" link.

And now, you can differentiate the truncated post. After verifying your code, copy it from your text editor and overwrite your HTML template code. Click on Save Template and you are done with the first step. Check your code carefully if Blogger fail to save it. Maybe you have missed any '<' or '>' in your code.

UPDATE!!: Please Read - Fixing Read More link appear on Blogger Fullpost

Step #2 - Add Class Tag in your default Post Template
The next step is optional to keep the class tag handy on every post you would like to have expandable post summaries. To add this, you can just go to Settings > Formatting tab on your blog settings. Scroll to the bottom and you will see the Post Template option. Then, put this code:


<span class="fullpost">

</span>



Here's the screenshot:



After that, click on Save Settings and you are done.

Step #3 - Creating your expandable post
You can now follow the same way like in the blogger help to create your expandable post. When writing your new post, anything you put above the <span class=”fullpost”> tag will be the teaser text. The main body of your post needs to go in between the <span class=”fullpost”> and </span> tags. When you have finish typing your post, make sure you add "more" label in order for the “read more” link to work properly.



Now, you can Publish your post, and see the result. Have fun blogging!!! Don't forget to subscribe my RSS Feed for more coding tricks. Feel free to link my blog on yours too... Heheh.





Share This Article:


Bookmark This Article:
Feed Me Digg Technorati del.icio.us Best to Stumbleupon Reddit Blinklist Furl Spurl Yahoo Simpy

65 comments:

Cassilis said...

Will this work in the classic template?

ApOgEE said...

Sorry, I haven't tried the classic template. I think Classic template will have issue on adding the label. Actually, I haven't found any way to read the post labels in the classic template.

Paul Escolar said...

hands down the best tutorial i found. even the blogger default one was confusing for the codes.

and your hack is great. One question though.

I applied your codes, but in the "FULL POST"

it still shows "...Read more"

how do i get around that.

Thanx in advance.

sauceone1@aol.com

ApOgEE said...

I recheck my tutorial and found that the &quot; code accidently changed to a '"' sign. I've fixed the code and hope it will fix yours too.

Can you show me your blog? maybe I can do some observation on how it didn't work on yours.

Paul Escolar said...

thanx for the quick reply.

Please further explain what i should replace.

www.paulescolarisdrunk.com

thanx again.

sauceone1@aol.com

ApOgEE said...

Hi Paul,

I have found the bug, here's the fix Fixing Read More link appear on Blogger Fullpost

Thanks for your comment!!

Ms. KT said...

HELP www.notes2ponder.blogspot.com I tried the instructions and they did not work for me. I am using rounders 3. Also, I tried to add a 3rd column and although it appears I cannot actually add content to it.

ApOgEE said...

Hi Ms. KT, I can't understand your question. Please explain in details, What do you mean by 'did not work' for you? Do you mean you don't understand the tutorial?

Ms. KT said...

Thank you so much. I have entered the codes as indicated. Will they take effect on future blogs? The ones that are currently there and too long have not been effected.

ApOgEE said...

Ms. KT, you have to understand the purpose of each code you've entered as I have already explained in the tutorial. It will effect past, current and future blogs if you edit them properly. add the 'more' label and place the long story between the 'span class=”fullpost”' tags.

Ignace / micronauta said...

Thank You. I have also been trying to find a way to avoid the JavaScript to show/hide the 'read more' link. Your solution seems very interesting, except for having to add the 'more' selectively, it messes things up for me because I use labels as visible categories.

Would it not be better to simply check the text of post itself for the fullpost string? Is it not possible to do that check in Blogger layout code? something like: if cond='data:post'=="fullpost" ?

ApOgEE said...

I'm also hope that blogger layout code have that ability to add other invisible tag to each post that we can use for this purpose. However, I just found the label way. Maybe you can change the 'more' label to other meaningful category for your blog for example, long-articles or any other label.

Or you may also do it the other way around like hiding the the 'more' label from your category list. It is achievable where you can just add an 'if statement' to find the 'more' label inside the category list loop and skip it. So, it will be hidden.

Peter Chen @ Enviroman (Blog*Star) said...

Hi ApoGee,

You have great codings here and nice screen shot with beautiful arrows and text boxes. What photo editor program do you use? I use Irfanview together with MS Paint which does the job but not as nice as yours. Can you show me how you do the screen shot with the arrows. I hope it is not Photoshop which is expensive but is some free photo editor program. I will be watching comments here.

ApOgEE said...

Hi PeterChen, I bet this is your lucky day. I'm always using Free and Open Source Software. It's called GIMP. You can download, use, and even distribute it for free!!

Ellen und Tilly said...

Hey Apo,

i really have to say "BIG THX"....
took me a day to figure this out, and i guess i wouldn't, if i hadn't found your site here. good work bro!

keep on rocking

ApOgEE said...

Hi Ellen und Tilly, thank you!

Peter Chen @ Enviroman (Blog*Star) said...

Hi Apogee,

GIMP? I had heard about it long time ago. I believe it is as good as Photoshop, but it is more complicated than Irfanview and I was too lazy to learn how to use it. How long did you take to learn GIMP?

ApOgEE said...

Hi PeterChen, I don't remember how long it takes me to learn GIMP. But I'm pretty sure that it takes shorter time if you already have some basic understanding in Photoshop tools, layer and effect. Google will be your perfect friend and help source to learn it faster. There are lots of free tutorials over the internet.

Question Mark said...

I'm having a real hard time with this. I put in all the codes you said, and in the places you said to put them, but nothing even shows up.

I've tried putting it in different places, but still nothing.

Could you take a look at my source, and let me know what I'm missing?

http://questionmarker.blogspot.com

Author said...

Hi apogee, I can't seem to get the Read More link to show up on my blog even if I did everything else! Is there a way you can check my blog and le tme know? the entry I tried it on is called "TEST" http://dashtodebtfreedom.blogspot.com thank you

ApOgEE said...

Hi Question Mark and Author, I hope I could help u guys. But I don't have access to your blog layout. You can allow me to access your layout by adding me temporary to your blog author list. To do that, go to your blog settings, click on Permission tab, click on add author and add my email jerungkun@gmail.com . then set me as admin. I'll try to help u with the code.

Author said...

Hi Apogee

Thanks for the offer, I actually ended up looking on my blog designer's site for help and he had an instruction set that showed me where to put the codes. Your code instructions didnt work on mine because his template looked very different. turns out for his layout, I have to put the code in a different spot.

Karen said...

Hi,

I liked your hack and it works great if I do it from blogger, but I prefer to e-mail the post instead of opening it through Blogger - have any tips on using your awesome expandability, but via e-mail posting?

Thanks :)

ApOgEE said...

I'm not sure about posting via email coz i haven't tried it yet... maybe later..

The A of DNA said...

I'm getting pretty beat and frustrated because I've tried soooo many ways that make expandable post summaries, but to no avail.. .

I did everything you said to the 'T'.. I didn't forget any < symbols.. ANYTHING... and it just doesn't work..

I would really appreciate some help.
Thanks,
Ana

ApOgEE said...

Hi The A of DNA,

I'm sorry to say... Doesn't work is a strong statement. Does it sit on the couch all day? Does it want more money? Is it on IRC all the time? Please be specific! Examples of what doesn't work tend to help too.

Stephen said...

the read link still shows up in the article page use this code instead

<style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
span.readlink {display:none;}
<b:else/>
span.readlink {display:inline;}
</b:if>
</style>

Then for the bit below use

<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;more&quot;'>
<span class='readlink'><a expr:href='data:post.url'>Read more...</a></span>
</b:if>
</b:loop>
</b:if>

that will show read more on the main page, but on the article page hide it

brainchild said...

I 'd like to try this on my blog. I recently added an expandable summary using jQuery Expander Plugin by Karl Swedberg. I like the expanded format but am not too satisfied on where my post is cut. Do I have to revert back to my old setting before I could use this version? I'm not techie and I'm afraid to try this and end up messing my site. But this is exactly what I want.

Hope you can help me. Please visit my site to see how it looks like.
http://brainchildunveiled.blogspot.com/

Thank you so much.

Pavel said...

Hi,

It's good for me but there's a minor problem.
I installed "related posts widget" and it shows all the post with the label "more".
How can I solve this problem.

Thanks,

Pavel

killertu said...

Can someone tell me why it work but it doen't show that I need to get into page,because it doen't show the word read more but ti till shorten it

Eduard Lucaci said...

Finnaly a nice way to do it. I've been searching for this sollution for some time. Thx. And also thx Stehpen for your solution. Very hard to find the perfect one.

Ida Kurnia said...

seep.... :)

AWYN said...

Thanks for the code. It works perfectly.

Laura said...

It works like magic.Thank you!
If i did that, anyone can!

Tony Noland said...

Thanks very much! Once I cleared the hurdles of my own HTML ignorance, this worked quite well for me.

JV said...

Thank You very much. It works! ;)

Juan PLC Salazar said...

Thanks so much! Impecable!

Ymae said...

thank you, thank you! this was really very helpful. i've been trying to follow bloggers help's instructions on how to create expandable post summaries to no avail, but was able to do this thanks to your isntructions. :)

Ymae said...

recommended you in my blog for anyone interested to create expandable post summaries on their own blogs. after all, of all the instructions i perused, yours was the most helpful! :) link is: http://dqtendencies.blogspot.com/2009/03/read-more-read-more.html.

thanks again! :)

Traveller said...

this doesn't work if multiple post are displayed on a single page. only the first one is displayed correctly.. others are not

vma said...

Great !!!!

Is the unique that function OK.

I tryed many, but only this is OK.

Thanks

Victor

Charlie said...

Thanks you so much

I have been looking for a working how to on this

and your article got me up and working in 5 minutes

thanks a million

Blog Admin said...

Thanks for this code, but it has a problem. It will working only with those posts which has only one 'span' tag. But if i have more 'span' tags in a post then its not work. You can check it on my blog http://successdesigners.blogspot.com/

Please help me to fix it.

ApOgEE said...

Hi Stephen,
Thanks for sharing your solution. Actually, our template is different that's why some of us found it works and others need some tweak.

Hi brainchild, thanks for sharing.

Hi Pavel, you can use other tag instead of 'more'

Hi killertu, maybe because you missed the 'read more' link on your template. Double check your template code

Hi Eduard Lucaci, thanks for commenting my blog

Ida Kurnia, ;)

Hi AWYN, you're welcome!

Laura, sure, you're welcome!

JV, Juan PLC Salazar, Ymae, you're welcome!

Traveller, double check your code. maybe you miss something.

vma, Charlie, you're welcome!

Hi Blog Admin, if you want to have more span tags, you can set it as different class name as you can see on the <span class='fullpost'>. Simply change it to something else for other span tags.

Liam Murray said...

Anyone aware of a solution for the classic template?

divxvid said...

I saw brainchild's blog (http://brainchildunveiled.blogspot.com/).It's beautiful!! "Expandable" works perfect...
More than perfect...because the post's photo on the main page is small and when you open the post's page (clicking "continue reading")
the photo is big!! Can anyone tell me how can this happen please? I have been looking for this hack ,for about a month now!!!

Thank you ApOgEE for this post!

Noge said...

anybody know how to change the read more color (blue?) and make it "bold"?

Ann Dee said...

Wow it works! Thanks a ton.. But I have a new problem now. I can use this on all new blogs that I post. But what about my previous posts? How do I go back and edit my previous posts with a Read More link? Please help...

Eric R. Umali said...

Added all the necessary code, and only one snag: the "Read More" link appears *before* my summary text, instead of after.

thebogopogo.blogspot.com

Any suggestions?

Ashwini said...

Hi

Thanks the hack worked for me.. how do i add this hack to my old posts...

Thanks

ApOgEE said...

hi Ashwini, congratulations! you've made it!. Now, just edit your old post by following the step #3

Anne Lossing said...

I have had expandable posts on my blog for quite some time now and a couple of days ago when I was posting a couple of new entries, I went to check and see if all was well and realized that NONE of my "read more"s will open. What can have happened and how can i fix it?

Thanks a zillion for any help you can give me ... the blog is www.rainforestrecipes.blogspot.com.

Anne Lossing

Sweet Tooth said...

I can't get this to work and it's frustrating me. Ahhh!!

http://sweetsandlife.blogspot.com/

Please help me out. I can't see the "read more" link. It works when I hit the title.

Halandir said...

Hey thanks for the tutorial, I was banging my head against the wall trying to figure that out!

TFLive said...

Hi, I am hoping you read these as could not find an email address.

I am using your code, but modified it for various reasons. The result is code that does what your does in a much more compact form(which I can provide if interested).

However, it occured to me, what if you could use the "More" label check as an on and off switch for expandable post? Lets say after the fact you decide you don't want the post "shrunk", rather then remove the "fullpost" code, just remove the label. Change your mind,add the label back.

The problem though is I have no clue how to do a boolean or variable check because I think the below is the algorithm that would be necessary to make it work.

if blog = item
fullpost inline
data:post.body
else
loop through variables
if label = More
foundLabel = 1
end if
end loop
if foundLabel = 1
fullpost display none
data:post.body
Read more...
else
fullpost inline
data:post.body
end if
end if

The key would be to define a value for when the label is found but how do that?

If you have any ideas it would be good to hear. email: canowupass(at)yahoo.com

Stephanie Soondar said...

Hi,

Just a quick note: have been on various sites trying to determine how to get an optional post summary, and yours is the first - of many! - that has gotten it right. Thanks: for doing the footwork, and for making it publicly available.

Best - Sls.

Nyssaki said...

Hi!

I'm not sure if you still read comments to this post anymore, but it's worth a shot ;-)

Your expandable post summaries was the best one I've found so far, but I'm having trouble with it.

I applied it, and it works perfectly fine in IE, Opera, and for new posts in Firefox. But old posts in Firefox are not affected...

I've triple checked everything I could think of.... Can you please help?

My page

Yours sincerely
-Nyssaki-
aka Jennifer

ApOgEE said...

hi all, thanks for your comments. I'm sorry for not be able to answer all comments.

Nyssaki, as far as I know, there shouldn't be any problem whether it is new post or old post. You just have to check:
1. you put "more" tag on that post.
2. you put the long (expanding) post within the <span id="fullpost"> tags. Please refer to the article for detail explanation.
3. Make sure you put all codes in the correct places.

Hope this helps. Good luck!

L.McQueen said...

Really helpful, thank you so much.

I have found, though, that if I go back to an older post and try to convert it to an expandable post I fail miserably. The "read more" link appears but after the text which I was intending to have truncated, ie the text I put between the span class = "full post" tags. I haven't forgotten the more label, and I am definitely putting the text of interest between those 2 tags. It works great if I create a new post, but I'm doing something wrong if I try to apply it to an older post.

I'm clearly a novice here..... any ideas what I'm doing wrong?

manoj said...

Fantastic job!

I followed your complete tutorial and able to get the short post instead of full post in the index page of blogger blog.

But here i am facing a little problem. My blog is not showing "Read more" link.

I could not figure out what happened wrong.

Please help me out.

Thanks

TechGeeze said...

I have created a friendly tutorial for Blogger expandable post summary, it is new functionality added to the blogger editor. You can head on to this link article: New Expandable Post Summary from new Blogger Editor

Dissertation Writing service said...

This kind of information is very limited on internet. Nice to find the post related to my searching criteria. Your updated and informative post will be appreciated by blog loving people.

UK Dissertations

Dissertation Writing service said...

This kind of information is very limited on internet. Nice to find the post related to my searching criteria. Your updated and informative post will be appreciated by blog loving people.

UK Dissertationsjik

Paul Escolar said...

Hi, Apogee.

Not sure if you remember me, but i was one of the first people to use your code!! So appreciative of that till today.

3 years later....i noticed the "Read More" isn't showing up for me anymore. maybe you can take a look and let me know a fix/problem.

Thanks again, awesome resource till this day!

http://www.paulescolarisdrunk.com

-Paul

Bob Luis said...

Hi,

Thanks for this interesting and informative tech tips. It will help all bloggers !


Bob Luis
Data Recovery Expert
EDB PST Converter