Expandable Post Summaries ~ The Blog Doctor.

Expandable Post Summaries

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

Expandable Post Summaries is the method by which each blog post consists of a short paragraph of introduction followed by a 'Read More' link. This enables the reader to get a small introduction to each post on the main page. He can then click the Read More link if he gets sufficiently interested........

Many bloggers have reported confusion when they tried to follow the instructions on the official blogger help page for this hence I have tried to put the help in more easy to follow terms here. There are basically three steps to follow if you want to implement expandable post summaries in the new layouts template.


The first step is to put the code for the conditional css. This changes how posts display on different pages. To do this login to Dashboard and click on Layout for your blog. Then click on Edit Html and first backup your template by using the Download Full Template link. Then scroll down till you come to </head> tag and add the following code immediately above it :

<b:if cond='data:blog.pageType == "item"'>
span.fullpost {display:inline;}
span.fullpost {display:none;}

Save Template. IMPORTANT NOTE in the layouts template there is a ]]></b:skin> tag just above the </head> tag. Add the above code so that it lies between these two tags. What we did here was to define a class called "fullpost" that will appear only on post pages (permalinks).


The second step is to add the Read More links which will appear after the paragraph summaries. To do this put a check in the Expand Widgets Template checkbox at the top of the Edit Template text box.
NOTE : If you do not put a check in Expand widgets template checkbox at the top of the TEMPLATE CODE BOX you will not see this code.
This is in the Edit Html subtab of Template tab. Then scroll down in the code till you come to the Blog Posts Widget code where locate this line of code :


Add the code below immediately after the above code :

<b:if cond='data:blog.pageType != "item"'>
<a expr:href='data:post.url' target='_blank'>Read more!</a>

Save Template. This link will only appear on the main page and archive pages, and it will redirect your reader to the post page containing the full text of your post.
IMPORTANT NOTE : Do not use any other code or it will give error.

You can also add your Post Title at the end of the Read More link so that it will read "Read More on "My Best Post"!"


A Reader wanted to increase the font size of the Read More! link. To do this add this code instead of the one above :

<b:if cond='data:blog.pageType != "item"'>
<span ><a expr:href='data:post.url' target='_blank'><font size="120" color="red">Read more!</font></a></span>

Increase or decrease the figure 120 as you want it and then save the template. To make the font bold use this code instead :

<b:if cond='data:blog.pageType != "item"'>
<span style="font-weight:bold;"><a expr:href='data:post.url' target='_blank'>Read more!</a></span>

Save Template. To do both use this code :

<b:if cond='data:blog.pageType != "item"'>
<span style="font-weight:bold;"><span ><a expr:href='data:post.url' target='_blank'>Read more!</a></span></span>

Save Template.


The last step is to modify the post template so that each post when created will show you where to place your summary paragraph and where to place the rest of the post. To do this go to Settings------>Formatting and scroll down to the end of the page to the box for the Post Template. Copy and Paste the following lines there :

Here is the beginning of my post. <span class="fullpost">And here is the rest of it.</span>

Save Settings. When you click on Create Post and then Edit Html tab of Post Editor you will see the following (Click Image for larger view) :

Replace the line "Here is the beginning of my post." (Type your summary here) with your summary paragraph. Then replace the line "And here is the rest of it." (Type rest of the post here.) with the rest of your post. Do not delete the other lines <span class="fullpost"> and </span>. Also add your summary paragraph above both the lines and your rest of the post between the lines. Then click Publish to publish post.


Login to Blogger.com and click on +New Post link on Dashboard. The Post Editor will come up. Click on Edit Html tab in top right frame of Post Editor. This is what you should see (The colors are mine) :

Type your summary here
<span class="fullpost">
Type rest of the post here

If you want to show a photo or any text on the summary post on the Main Page put it instead of the red text line.

If you want photo to show in the full post on the Post Page put it instead of the GREEN text.

Before publishing make sure that the two span (code) lines are present and the </span> line is at the bottom and the span=readmore line in between your summary post and the second half of the post.

Then only click on Publish button.


1. The hack will not apply retrospectively. That is to say after you add the code you will have to edit your past posts so that they display in summary fashion on the Main Page of the blog.

2. The hack applies only to posts on the Main Page. Once a post having the hack moves off the Main Page it does not display in this fashion. This is a Main Page Hack.


The advantages of this method is you get a link to your posts below your summary paragraph which gets an additional link in the search engines indexing. Also you do not have to rely on any external Javascript. The third advantage is that the Read More link opens into a new page leaving your main page still open in viewer's browser.

Technorati Tags:, , , , ,


Petulant said...

Question. The code works great but now I have Read Me! on every post regardless. Any ideas?

vin said...

I don't think that can be avoided if you use the above code. The Readmore serves like another Permalink to your post.

Dorian Peters said...

THANK YOU!! That xml error was driving me nuts. sanity restored.

Masoko Köztársaság said...

Problem seems to be resolved.

Chichi said...

Thank you so much. I'm new at this & dont know anything about it, but you helped me with easy steps! thanks alot!

Miyano said...

Thanks a lot for your help. I want to translate your message in french and put it on my blog. May I?

vin said...

By all means go ahead. Do include a link to this blog.

Mina said...

Thank you soooooo much for your website. Because of your site I've been able to: 1) create expandable summaries of my posts, 2) add an icon to my blog titles, 3) add rss feeds to my blog.

There's just one more thing I can't figure out how to do now.....How do I create a "Most Popular Posts" widget? I couldn't find it on your site or any of the others that I use.


Mina said...

Is there anyway at all to make the expandable links open in the SAME window rather than in a new window?

I'd rather it that way than a seperate window for every post.


vin said...

To open in sae window simply omit
in the code for the Read More link.
There is no Blogger 'Most Popular Posts' widget. You have to see which of your posts are most popular Statcounter in New Blogger and then paste their links in a Link List widget. See DummiesHow to Add Widgets.

Crabby McSlacker said...

I'm a newby and probably shouldn't start fooling with this until I understand it better. For example, if you use this method, do you end up breaking every post into two separate pages? Or is it something you can just use when you have particularly long posts? It sort of looks to me like its an all or nothing thing, which probably wouldn't work for me.

BTW, thanks for this blog--it really helps to be able to come here!

vin said...

You do not break a post into two separate pages. If you see the Read More link and the post title link are the same. The rest of the post is hidden till you click on Read More.

Crabby McSlacker said...

Okay, so it's obvious I'm kind of clueless here. But I guess i have the same question, even if the 'read more' is hiding the rest of the post rather than putting it on a separate page: does this happen with every post, like-it-or-not, or is it something you can choose to do with some posts and not others?

Thanks for your patience with the clueless.

vin said...

The solution posted above is for the whole blog and there is no option to switch it on and off at will.

Isaias Malta said...

Great stuff to bloggers! The tips did work fine on my Blog and finally I got it. Before I was tried the oficial blogger help and... without the right info was't impossible to do the right things. http://pireu.blogspot.com

Duo Quartuncia said...

Thanks very much for this. I had been trying to follow the advice at Blogger Help: How can I create expandable post summaries?, and that gave XML errors. I was able to fix it up myself -- much as you have done here -- but the help center really needs to be updated. I'm have not found how to report such a problem properly. The report facilities don't allow for that kind of feedback that I can see.

tuxini said...

I want my Read More to show up as Red (255,0,0). How can I do that?

vin said...

Use this code :

<b:if cond='data:blog.pageType != "item"'>
<span style="color: red;"><a expr:href='data:post.url' target='_blank'>Read more!</a></span>

Tuxini said...


I appreciate the help, but that doesn't make the color change to Red. I copied the code into Notepad and from there into my blog template. Is there code somewhere else that is overriding the code here?

vin said...

Your link code in the template css is probably overriding it. What is your blog url?

Ray Harris said...


Thanks for clarifying how to do "read more". I forgot to make the change to the template in formatting at the time I changed the template. How can I fix my earlier posts? Do I have to delete and repost them? Thanks

vin said...

This fix is for posts on the main page. If you have 4/5 posts on main page (necessary if you wish to make your blog load fast) you need not apply it to older posts.

wd tom said...

can you give some more example of using only "Post Template" function without fiddling with the editing of HTml of the template. What I mean to say how to use Post Template to give some changes to the post without editing the main template.Is it possible if so how ?

vin said...

wd Tom,
It all depends on what changes you wish to make in the posts.

Cindy Callinsky said...

Thank you sooooo much. This is great. I've been trying to get this to work for hours.


jay said...

hi, took me 3 hrs to figure out ur word lol, im new to all this, but i finnally done it, thank u, all i got to do now is figure out how to get the read more off for posts that are short lol.

Rapsodia Antillana said...

Thank you so very much! The expandable post job on my blog took only 1½ hours with your instructions and it came out perfect!!!!

Thanks again!

Refugee said...


I followed ur steps and got the Read More and everything. But when I clicked on the Read More a new window popped up but the post did not. Sow basically I have a post title plus the Read More link but no post.

Can you help?

vin said...

Did you create the post after fully implementing the hack? What is your blog url? For detailed help my email address is in the left column.

Refugee said...

Hi vin
appreciate the prompt reply.
All the posts were already published before implementing the hack. All the posts have the same problem. my blog url is www.cb48.blogspot.com.

vin said...

You are probably typing your posts wrongly since none of the posts appear even on clicking the post title. Go through the above post carefully to implement it. You may have forgotten to add the code in the Post template. Please use my email as this is increasing the middle column!!

AnnaLiza said...

THANK 4 ALL YOUR GREAT HELP! how do i align the read more to the right?

vin said...

What is your blog url? Email me for more details. The address is in the left column.

Wade Hurst said...

Thanks so much, this help was awesome!!!!!!!!!!!

ChiGirl said...

I got the expandable feature to work. However, it is at the top of each post and not at the bottom.

Any tips? Thanks!

vin said...

Go through the instructions again. You may have placed the code in the wrong place. My email address is in the left column for detailed help.

Tom said...

Man you are the guru! Thanks very much for this. I have one help question though: my new posts have the expandable feature but my old ones don’t. Is there any way to apply the code retrospectively? If I copy the old post and put them in the new post box they appear in a different order on my blog and I am worried the comments will be lost if I delete the old ‘full’ posts.

vin said...

This feature is only for those posts which are on the Main page. Those posts off the main page do not need it.

You can decrease the number of posts on Main page by Settings----->Formatting---->first setting.

Open the old posts for editing and rearrange the content between the span class=readmore tag.

Lisa of Longbourn said...

I am very happy to have found working code for this trick. Other blogs on the subject have a lot of questions and problems in the comment section, and I thought I'd post a simple "thank you" here, but I don't feel so novel since the first 5 comments are basically that. Still, I'm relieved and grateful. I even blogged about this site because I want others to know.
To God be all glory,
Lisa of Longbourn

Lori said...

I followed your instructions and everything seems to work. However, I am a bit unclear on what the third part "post modifications" does and how I am supposed to handle this. It doesn't appear to affect my existing posts, but I see the text appear when I go to create a new post. Can you give more guidance on what I'm supposed to replace the text with?

Also, I've seen on other blogs "toggling" the comments so you click on a link and the comments appear right below your post or you click that line again and they disappear. Can you advise how to do this?


vin said...

The post modifications enable you to divide your post into an excerpt which shows up on the main page and the full post which shows up when you click the Read More link.

It will only affect newer posts and those on the main page.

As for comments can you give an example link. Use my email address in left column for detailed help.

Carolan Ivey said...

Thanks! This was very helpful!

Floyd B. Bariscale said...

Thanks a ton. This was perfect.

Silkenhut said...

hi there, first of all, I want to thank you for the great tutorial that you have posted. It was very clear and straight to the point.

however, I seemed to have seen a problem regarding some of my posts.. I tried to find your email address at the left column but I could not find it.. -_-

should i tell my problem here or should i email it?

vin said...


Email me at drbhatns at gmail dot com.

Silkenhut said...

Hi there, it's me again. I noticed that even though there is a read more link, the content of the pages that are supposedly hidden are still being loaded.

I purposely cleared my cache and loaded my blog. I checked the cache and the images have been downloaded although they are not showing in the blog.

Is this hack only hiding the post for viewing but it is still there when it is being loaded?


vin said...


You are quite right. Many Ads. require content to target. Hence the content is hidden but there.

The main purpose of the hack is to show a summary of the post to the reader so that he/she can quickly glance through all the posts and choose to read only those that pique their interest.

bankmeister said...

thanks for putting together this page. your information was helpful, and i will likely return with more questions. kudos.

bankmeister said...

okay. i can see this will work for future posts, but it did not for all previous posts on the main page, that is, the "read more" is there, but it's at the end of the posts. i went in to edit them and could not find the code in the compose or the edit html windows. any ideas?

vin said...


The hack is only for the posts displayed on the main page. Reduce their number. No need to edit Previous posts./

The End said...

Hi, I got the expandable part working but I cannot get the "read more!" to show.

Also is there anyway to write a teaser that does not show up in the main post?

vin said...

The End,

What is your blog url? Use my email address in middle column for detailed help.

Jonathan said...

my expandable post summaries on both of my blogs stopped working yesterday (it now says javascript:void(0); when I move my cursor over the "Read More" link). I hadn't even touched the code or made a post on one of the blogs in the time it stopped working. Any idea what happened?

vin said...


As shown in the last paragraph of this post above titled "Advantages of this method" this method does not use any Javascript. If you move the mouse cursor over the Read More link you will see the URL of the post.

Jonathan said...

Good point. I was just looking for help with my particular issue and picked someone who looked like they knew their stuff, but I obviously used a different method. I still have no clue why mine stopped working though. If I switched the code to your method, would it still work for posts I've already made?

(p.s. - I'm a relative newbie in html, so be gentle)

vin said...


This hack is only for posts on the main page. It is not recommended to put more than 4/5 posts on main page as it takes too long to load.

The advantages of this method is that Javascript is not used and hence Adsense can target your page content.

Anonymous said...

doesnt work on firefox?

vin said...


It works on Firefox. Just load this blog in Firefox and see. I am using this hack.

Moody Foodie said...

Since changing my template to a 3 column format I have had the 'read more...' link at the bottom of my posts but they do not link to anything as they are right at the end and are therefore pointless. I followed your steps but I am still left with the same problem. Can you tell what I may be doing wrong? I am so frustrated and (as you can probably tell!) know nothing about html. Thank you, thank you, thank you!

vin said...


What is your blog url? Just follow the steps in the above post one at a time and you will be alright. Click my email in center column for detailed help.

Clive Bates said...

Thanks for providing this. I'd dearly like to be able to do this, but I've looked through my template and don't have data:post.body tag so can't follow these instructions.

I'm using one of the Blogger standard layouts and I haven't tried to do anything clever with the template.

My blog is... http://baconbutty.blogspot.com

I'm probably just being stupid!

vin said...


Go to Template----->Edit Html and put a check in the Expand Widget Template checkbox at the top of the template box.

This will expand the hidden code of the widgets.

You can do a select all in this expanded template box and then copy and paste to a Notepad file. Then use Ctrl+F to find the relevant code line.

Clive Bates said...

Okay - have sorted this IE thing out now.... it was the lack of /span tags at the end of the postings.

So, now I have your excellent summaries feature working just fine... many thanks.

ombloger said...

Your tip works fine here and here.

ben said...

Thank you very much for the very clear and helpful information. I'm very grateful, and my blog looks and works better instantly. Thank you for your service to the community.

Sparhawk said...

I used your code in my new blog (still being developed) and I noticed that there's a big gap of blank space between the last line and the "Read More". Is there a way to reduce this gap because its a waste of space?

My blog is in, http://staluciarealtors.blogspot.com/

Thanks for this great site!

vin said...


I think there is a problem with where you type your post in relation to the code present in it. Just review Step 3 again.

Sparhawk said...

Sorry Vin, but I don't know what you are trying to tell me.

When I open Edit Html tab of Post Editor, I see the following line:

What I did was to replace the line 'Here is the beginning of my post.' with the summary paragraph, and the line 'And here is the rest of it.' with the remaining paragraph.

Did I do something wrong or I need to do some more? I haven't seen the line - span class='readmore' - in my Edit Html tab and I'm wondering if I should type this line instead.



vin said...


Check your Settings----->Formatting---->Post Template at the bottom. Then follow the third step in my post above.

You should see span class=fullpost in Edit Html tab.

If not just repeat the steps in the above post from the beginning and add what is missing.

mrBadak said...


Anyway, for those who don't like the "read more" link that appears on every post (regardless if it's a long or short post), here's what you can do.

This is a silly work-around though hehe.

Publish your post and then, view your blog in another window. Copy your post's full URL into your pc memory.

Then, go back to editing your post and enter a link just before your cut-off point and the link goes to your post's single page.

So you can skip the tip of placing the "read more" links on every post on the main page. Of course, you still need to follow the rest of the tip on this page, most importantly, place the rest of your post inside the 'fullpost' span.

problem solved.

vin said...


This adds one or more steps after publishing a post. (View post---Copy post link----Open posts list----Click Edit Post-----Paste the link----Publish)

If that is OK with you I am OK 2! :)

Roundtable Pictures said...

Love your site. Is there any way to align the "read more" to the right?

struggleformeaning said...


Thanks SO MUCH for your step-by-step guide! I had to go back and redo my first three posts so they could take advantage of the new template, but no biggie as no one reads the damn thing anyway. :-)

You rock!


The Rock Reviewer said...

Thank you so much for this guide. I was trying to use the Blogger help with no luck. Then I found your site and got it to work first try, no problems.

Dryat120 said...

Thank you for this post.
You should work for Google ... or Blogger ;-)

Diesel said...

I cannot begin to describe how difficult this process was until I found your site. You are a god.

Fletch said...

Just wanted to add some more "Thanks." I added this feature in no time flat. My only qualm is that it has added the "Read More" text/link to the end of all prior posts, but I can live with that. Any that I want to change, I can do manually.

Kirk Warren said...

Great guide. I have had my blog up and running for a little over a month now and could never figure out how to do this expanded post option. Many thanks for this. I got this working for the most part in about 10 minutes. Very easy to understand and quite thorough.

I only have one problem as of right now though. I cannot seem to get the Read More! link positioned correctly. It ends up being on the line immediately after my span class = full body and left aligned. Your posts all have it several lines down from the last part of your summary post and I would simply like to have one line skipped before it shows up, almost like a new paragraph with a right aligned Read More!. You can see what's wrong with mine at http://thebuypile.blogspot.com/ . I have added this feature to the first couple posts already and am working on the other front page posts now.

Also, one post has the a random paragraph from the end of my post in the preview before you click Read More. Once I click Read More, the post goes back to normal positioning. Not sure what happened there either.

Either way, I'll be farting around with this most of the night. Excellent job and thank you for posting this.

Kirk Warren said...

I know I just left a big comment with some questions, but I figured out most of the problems myself with a quick refresher on my web programming.

The right align stuff for the Read More! can be easily fixed by adding a float: right; to the span style="font-weight:bold;" tag. Pretty simple to change and I feel stupid for having asked it now.

I rearranged the post I stated I had problems with as well and it works perfectly now. Dont know why or how it was showing random sections of the post in the 'preview' before you hit Read More, but it works now, so dont know what to say about that. Probably my own fault with a random span tag not closed or something. Also fixed the non skipped line between Read More adn my last sentence before the jump. Another stupid mistake on my part.

I'll be updating my site tomorrow, and while not a tech blog or anything really related to yours, I've already added a decent plug for your site thanking you for helping me with the new expanded post feature with appropriate link. Thanks again for the excellent post and sorry for spamming with stupid questions before trying to figure them out myself.

flick said...

Awesome - that blogger help page was driving me mental. Thanks!


Cammeel1 said...

Thank you so much for making this simple to understand!

Lauren T. said...

Thank you so much -- this guide was extremely helpful for those of us who know what we want but don't know how to make it happen. :)


Michael said...

Thanks for your nice post!

Redbeard said...

Thanks for the great post-I'm just getting started, and need all the help that I can get!

shyam_rocks said...

I don't want to have Read More for some post in my blog ..How can I do that.....

I had removed the last span tag in many post and I got the result but it is not happening for every post..

Tell me if there is any way to do that....

Tech Global.Com

someone said...

i hardly recommand this method :) http://betabloggerfordummies.blogspot.com/2007/02/expandable-post-summaries.html
much easyer
much better
you put read the rest only where u want it

Marilyn said...

Does this work for classic templates? You mention widgets but I don't see anything like that on my blog.


Leslie Suzanne said...

THANK YOU for your blog. You make complete non-programmer-types capable of modifying code, something I never would have imagined I could do. I am very new to blogging and have used your advice to make some nice tweaks to my site. I'm sure I'll be back for more fun ideas as time allows. And by the way, I completely blame you for distracting me from my studies, who know altering code was so addictive?!?!? Thanks again!

SHORT said...

shyam_rocks said...

I don't want to have Read More for some post in my blog ..How can I do that.....
you may try to put this line

{span class="fullpost"}{/span"}

at the end of your post.
Noted that you should replace '{' and '}'
with '<' and '>'
Noted also that the ["] after the second 'span' is what do the trick, not a TYPO.

etc said...

Thank you Vin
You …saved my life!!
It was very helpful!
I am going off now to create a link to your very useful pages on my blog!!

(army)Wife said...

THANK YOU!!! THANK YOU!!! THANK YOU!!! This post was the biggest help ever!!!

sirisha said...

Thank you Very much.Your explanation is fantastic

P!shOo said...

Thank you very much Vin for your trick.
I've try it for my blog, http://gbuangers.blogspot.com/ and it greatly works on Firefox.
I also tested it for my blogger "audience" using Internet Explorer, but at the place of my sidebar there's a blank.

could you help me? please.

vin said...


That has nothing to do with this hack. Try undoing all the changes and then see if the sidebar comes back up.

Mina said...

Yo, Vinny, good stuff. Thanks.
And... Mina, I don't think that you wanted the effect you asked for.

And... we have the same name. Hi!

Here's the problem. Properly speaking, the "Read More" should open up the rest of the article without disturbing the other postings. This doesn't. So it's not perfect, but it's darn good.

Thanks again!

vin said...


To get your 'perfect' hack you will have to implement Javascript. This will add code bloat to your template OR if you put it on external server you would have to choose one with 99% uptime!!!

...and BTW the name is Vin :-(

Jessie said...

Your step by step walk-through was SO helpful and easy! Thanks!!

Also, I tried what SHORT said (on 10/9/07 10:33 am) to do to get rid of the 'Read More' and it works!

seo-keresooptomalizalas said...

Here is a hungarian version about expandable texts
(itt olvasható egy magyar nyelvű bejegyzés a bejegyzések kettéosztásáról a blogspot.com-on)


Calgary Flames' Fan said...

I am new to the template. You mentioned that "Save Template. IMPORTANT NOTE in the layouts template there is a ]]></b:skin> tag". I could not find "]]></b:skin>" in my template. Can you explain what this one is and what is <b:skin>? I don't have this tag in my script. Thanks!

vin said...

Calgary Flames' Fan,

You may be having the Classic template. That has the <style> tags instead of the skin tags. For more details see :

Parts of the Layout Template

Calgary Flames' Fan said...

Since "Read more on ...!" is repeating on each blog, I changed the word to "Read this blog only ...". See my blog at http://david-chu.blogspot.com/

vin said...

Calgary Flames' Fan,

It will appear on every blog post even if you end your post before it.

Blatt said...

As some have already noted, this hack works for most templates, but the 3 column templates aren't compatible with it when viewed in IE7. Take a look at my blog:


You might see what I mean. Unfortunately I can't seem to find a workaround. If anyone has any ideas, I would love to know.

vin said...


This blog is having three columns and is using the same hack posted above.

Check it out by loading it in IE7. I didn't have any problems.

The hack is not dependent on how many columns a blog has.

Q said...

also another question, when we have full post and we put that expandable link, how can I make it so you click the link and it jumps right to where I left off with that full post, instead of reloading over to the very beginning of the post?

vin said...


When the full post opens there is no Read More link. See this post and check the end of it. Then go back to my Home Page and you will see the Main Page posts in summary form with Read More links at the bottom of each.

David Mazel said...

The "Update" about changing the font size of the "Read More!" say "Increase or decrease the figure 120 as you want it...." But I don't see any number at all in the code, much less a 120.

vin said...

Thanks David for pointing it out. I have corrected it now.

*Coop* said...

This is fantastic, exactly what I needed and easy to understand! Thanks SO MUCH! I'll include a link to your page on mine...when I finish making the other changes you're helping me with. :-)

souldecirce said...

I don't see where I should add the "float right" tags for the "Read More" link.

souldecirce said...


Also, I understood this code for expandable posts to apply to all posts on the Main Page. Is that incorrect? Is the code only for future posts?


Chelny said...


vin said...


Add the float tags just before the read more link starts in the second step :

<a expr:href='data:post.url' target='_blank'>Read more!</a>

and then close it at the end. Also see the PLEASE NOTE paragraph at the end of the post.

vin said...


For Classic Templates see :

Blogger Help

Chelny said...

Thanks, but is there a way to move my "Read More" above my tags??

vin said...


If you can send me your template I can look into it for a solution. The email address is in the middle column.

gyz said...

Hello Vin,

I am using the "Simple II" template by Jason Sutter and I'd like to add the "Read More" hack to it.

I followed the instructions you provided, copy-pasted the code to the appropriate position, but on saving attempt the editor gives me a sorry message and an error code.

What do you think the problem might be?

vin said...


What is the error message?

jason said...

I am using a modified Rounders 3 template to make 3 columns. everytime I implement the style portion (first step) it erases my right hand, 3rd column. everything thing else seems to work. how can I fix this?

Larry said...

Thanks for the hack. I'm just getting started but had seen the read more tags used in other blogs and wanted to use them for sure. Your explicit description of exactly where to put the code made it easy.

vin said...


Did you clear cache after saving the changes? Try it out on another test blog.

vin said...


I have not published your comment regarding the error code "bX-aigizw" since it is too long and also has nothing to do with this post.

As explained earlier in the Google Blogger Help Group these messages are due to Blogger problems and are not due to the code changes as shown in above post as many satisfied users can testify.

The only thing to do with such errors is to contact Blogger Help as mentioned apart from the other methods which I have suggested.

gyz said...

I see, I was not aware of this. I'll stick to this page as strictly code related stuff then, thanks.

vin said...


Also have a look at :

Blogger Error Codes

gyz said...

OK, thanks for this link. By the way I decided to give it another try without truly much yet not too less hope, and Interestingly enough, now the editor allows me to save the second code sequence as well. Seems I'll be able to implement this neat hack in a min. Now me = another satisfied user. :)

Sam Hummel said...

Thanks for the tutorial, Vin. Everything worked great, except that now when you click on the "Older Posts" link at the bottom of the homepage, the next page doesn't load correctly in IE7 (it does in Firefox). Instead, of showing all the next posts, it only shows the first one. And it doesn't even show that one correctly. It shows the title, the summary paragraph, and then cuts off abruptly with no "read more" link, no post author data or date published data or anything. The rest of the page below it is blank background. The sidebar still loads correctly.

I'm guessing the problem has to do with what Blogger returns in the {b:if cond='data:blog.pageType == "item"'} query when the reader is on the "Older Posts" pages. Any ideas?


vin said...


This blog is using this hack. I tried doing what you said in IE7. Loaded normally.

PASSIONATE BAKER....and beyond. said...

Hi Vin,
I think I got there after about an hour. Now the prob is that the read more on published posts on the main page are showing at the bottom of each posts. i guess the read more will work only with posts issued after the CSS change has been made...I'm ver very new to this & am holding my breadth! Thanks a ton
I'm at http://passionateaboutbaking.blogspot.com/

GyZ said...

Hi Vin, I installed the Read more! hack, is there a code to avoid opening of a new window? I'd prefer to establish access to full content of the post on the very same page the visitor clicks the Read more! on.

vin said...


Just omit the : target='_blank'

from the code for the Read More link in the second step.

GyZ said...

Cool, thank you! : ]

GyZ said...

One more thing, Vin.

You think it's possible that this hack gives a hard time for Internet Explorer 7?

When I install the hack, Firefox loads the site nicely, but Explorer displays the "Done, but with errors on page" message, even fails to load posts on the front page with the hack in them - posts that Firefox loads up OK.

I realize more and more people are using Firefox, but would be nice to get the same results as in Firefox under Explorer. Any ideas what might cause Explorer to hick?

Vin said...


That message does not mention the hack code as the cause of the error specifically.

Also the hack applies only to posts created after correct installion of the hack. It works on my blog in IE.

GyZ said...

Hmm, I think I'd better post the error code. Sorry, can't paste it, but will copy it manual with extreme caution.

Here goes:

Line: 764
Char: 1
Error: '_gat' is not defined

I found some hints that this might have something to do with the new tracking code for Google Analytics. You think that might be the case?

If it is, should I then downgrade to the previous tracking code, or is it under development and will be OK with Explorer in the future?

Vin said...


That error has nothing to do with the above hack.

For the new GA code to work paste it in a Html page element.

GyZ said...

Hi Vin, the new tracking code is running already, nice to know it's not the cause for Explorer's
grudge. I'll try and look solution for it, as I realize deciphering Explorer error codes is not the aim of this wall of posts.

I'll stick to the subject of the Read more hack, which I think is close to perfection now, my only wish in stock remains a solution to set the visitor's browser directly at the beginning of the "bread text" of the whole post after the Read more link is pressed, sparing her/him the bother to scroll down the freshly loaded page linked behind the hack. You know magic sequence for this?

Cosmo Bali said...

I tried your tips and it worked fine, exactly like what I wanted. However, when I tried to post new blog entry, I only got the Edit HTML tab (where it shows the "type your summary here" etc). The Compose tab was gone. When I switched back to the original template, the Compose tab was there again. Since my HTML skills are pretty much non-existent, I use the icons on the Compose tab to change fonts, attach links and photos etc. Is there a way to run your hack and still get the Compose tab?

I'm using the Minima stretch template.


Vin said...

Cosmo Bali,

The Compose Tab has nothing to do with this hack.

To turn the Compose tab on go to Settings--->Basic----->Show Compose Mode---->Yes---->Save Settings

RSCME said...

This worked great for me the first time and I'm not a "coder". Thank you so much. This was probably the most helpful article I have ever read. I used to use wordpress and the "jump" function was built into the GUI. It was so great to finally figure out how to do it on my own.


Jesus Robles said...

Hey Vin, hows it going. Just wanted to know how I summarize posts I had before I started to summarize. I've done whatever I could for like the past hour and I've given up. If you could email me instructions that would be great. jesus DOT robles DOT 3 AT gmail DOT com

Vin said...

Jesus Robles,

How many posts do you have on the Main Page? You should apply the hack to only those posts.

First click on +New Post link on Dashboard and check whether you are seeing the correct post template code in the post editor.

Next open a post for editing. Click the Edit Html tab of the post editor next to Compose tab. After the first four or more lines insert this code :

<span class="fullpost">

Scroll down to last line of post and insert

</span> tag after the last word.

Publish post.

Your email address confused GMail. :-)

Patrick D. said...

You CAN add the links manually to specific pages if you want.

View the main blog to see how it works.

Cath said...

Hi Vin,
Thanks very much for this! I have used it successfully, and it worked first time.

Also Short's mod to remove the "read more" link from short posts is very handy, but smells badly hacky to me - unmatched quotes? Eek! Do you have a better suggestion?

BTW, did you know that your blog looks really horrible on firefox with mac OSX? There's a huge font, for some reason, which makes the 3 columns very annoying as so little text fits across them. I can send you some screen shots if you like.

Vin said...


It is very difficult to cater to every browser and every operating system and every monitor resolution out there.

Some hard decisions have to be made unfortunately.

Alkalamu Attayibِ said...

hey vin u mentioned something about how to get rid of the read more link on short posts.


This adds one or more steps after publishing a post. (View post---Copy post link----Open posts list----Click Edit Post-----Paste the link----Publish)

If that is OK with you I am OK 2! :)"

thats what u said abruptly, can u kindly elaborate more on how a dummy can do this, thanks :)

Vin said...

Alkalamu Attayibِ

That was my reply to Mrbadak who had already said :

"This is a silly work-around though hehe"

So that explains that!!

Alkalamu Attayib said...

so are you saying there is no way to do it?

Vin said...


The above hack applies to all posts on Main Page.

Anything can be done but it will require another code and hence another hack!

Bobby said...

Thanks, this is great!

Is there a way for the preview to show different information than what shows on the actual post page.
for example: on the preview i want some text then image 2.
on the post i want some text, then image 1, then image 2

is it possible?

Vin said...


The summary shown on the Main Page is a part of the full post seen after clicking the 'Read More' link.

You can have on the full post :

------------summary ends----

The last image on the post page will be repeated for which you an provide some explanation.

Anonymous said...


I put in the code between head and skin. I then clicked on "Save Template" and it worked fine. Then, I clicked on "Expand Widget Templates" and found data:post.body/. There is a p before it and /p after it. I tried cutting and pasting the code you provided right after data:post.body/ but before /p and it I could not save the template. The error message keeps coming up. So I tried putting the code after /p and it still didn't work.

What do I do? Thanks so much for your help!


Vin said...


What is the exact error message? Copy and paste it here.

vins08 said...

A test comment.

Ender!Krum said...

Thanks for the explanation. I found a link in your comments to another blogger who had fixed the link so it only shows when the post was truncated. It is cool except it will not display the "read more" link if there is certain html, such as (p), (div), (blockquote), etc. Not sure why this is...if anybody could help fix this, it would be greatly appreciated!


Imina said...


Thanks for the code. It worked great, except that now my sidebars don't appear on my home page, only on the post pages with the full text? How do I get them back on the main page. I am using Rounders 3 template. I am clueless when it comes to code, but I can follow directions. http://scrapbookinginspiration.blogspot.com/


Jackie said...

I'm having the same error! help! I paste the first code - no problem. The second keeps reading an error.

Vin said...


Can you paste the error message here?

Vin said...


I can see your blog sidebars both on the Main Page and the post pages in Firefox2! Try clearing the cache. See :

How to Clear the Cache

Jackie said...

Hi Vin,
after many failed attempts... I tried firefox instead of safari and BAM - thank you!

Jackie said...

ok, new question - do I have to have keep reading at the bottom of every post or can I choose the ones I want it on?

Vin said...


This is not a selective expandable posts hack!

It will appear on all posts created after installing the hack.

Imina said...


Thanks for taking a look at my blog. I did clear the cache with no results. I also viewed the page on two other computers and my phone. It shows up perfect on my phone. Since you can also see the sidebars on firefox, it makes me think there is some problem with IE. Any ideas?


Vin said...


Are the sidebars below the post column? Is it IE6 or IE7 you are using?

Keep Smiling said...

Hello Vin,
1, Thanks for this great blog!!
2, I tried the "read more" as you explain, but the link doesnt do anything.. I'm using "iTheme" blogger theme.

I already tried on a default template.. it works.. but not on my ITheme template...

Please help

Vin said...

Keep Smiling,

As you said it works on the default template. So there is no problem with the hack!

Contact the designer of your template.

Deborah said...


I've been searching all over trying to find instructions on how to make customizations to my blog!

And they work! wonderful just wonderful.


Bob Hayton said...

Great post. I found this through the Google Help Group.

While I was looking at your post, I had an "aha!" moment. I tried a variation of your method and I got what I wanted.

Bascially I got it so that I can remove the "Read more" links. All I did is edit the CSS (your 1st step). I eliminated the script about the "read more" links altogether. Then I just added in my own link to the post page on any of the posts that I chose to use the span=fullpost element.

I made the links look like this:

«click to read the rest of the post»

So, they don't look too odd if they happen to be in the middle of my actual posts. I don't plan on using this all that often on my blog, but its nice to have the expandable option. And its nice not to have countless Read More links that don't do anything other than confuse readers.

The link above shows how it looks in one of my posts, (I haven't got around to adding it to the other lenthier posts on my blog).

Thanks for the help. Hopefully my trick here helps others who want to avoid the "Read More" thing.

Vin said...

Bob Hayton,

Only disadvantage of this solution is that you have to Publish the post first in order to get the URL of the post.

Then you have to open the post in a browser to get it's link and then reopen the post for editing so as to paste the URL/link of the post at the end.

This is OK if you want to implement it only on few posts. But if you want to publish twice for every post it becomes tedious.

Instead at the end of a short post you can make it obvious that the post has ended. If any reader cannot understand that the post has concluded by the time he reads to the end will have to endure clicking on that link.

It will reflect on the author also that a reader feels he has been left hanging though the post has actually ended!!

Bob Hayton said...

You're right about that. But I usually publish, then quickly reedit my post anyways. I always make a few last minute improvements. Plus I won't be using the expandable option for most of my posts, only a few.

The method won't work for everyone, but some may find it simpler than messing with Javascript or complex CSS to get expandable posts without the endless Read More links.

Thanks again for your guide here. It really helps those of us who are trying to pretend we're CSS and HTML literate!

Vin said...


What I do if I have a small post is try and expand it by including more content or a picture etc.

If it is a really small post I put in a concluding statement like say "Happy Blogging!" and then put in a period.

To show that a long post is extending I break up a sentence (put in an incomplete sentence at the end of the summary) and use a series of dots after the last word like this................

Eleté said...

Thank you! I had been trying to figure out how to do this, and checked on some other sites, but your tutorial was just perfect. Im not skilled at this but it worked out without any problems,
Thank you so much for helping me out with this, now Ill go check out what other good stuff you can teach me :D

KEM said...

I used these directions & it worked much more easily than the ones on the blogger site. However I didn't like that it has the Read More on every post so I thought I'd share a strategy I've devised:
Create a 2nd blog and use that one for the entries you want to expand on using:
Text to be displayed
Works great and is more customizable, just takes some switching back and forth between blogs.

Mr. magicball said...

Hi Vin,

I changed my template code in the way you wrote. But now AdSense is not shown on the main page. Only at each post page it is shown.

What do I have to change in the template that AdSense will be shown also at the main page/domain of the blog?


Vin said...


The code affects the posts only. It does not affect Adsense Ads. put in the sidebar/header/footer.

What is your blog address?

1/2Kg de Broa said...

Nice! Very heplfull! Thanks


B Hill said...

Your steps were perfect! I've been scratching my head on this for two days...thank you SO much!

Radvan L said...

Me again. I did all reccomended above but in my case the Read more line appeares in front of the post, instead of the end. What to do in this case? Thanks.

Vin said...


Go through all the steps again carefully and check yourself.

Redo this continulusly until it comes out right. :-)

admin said...

Wow!!! You made it seem so easy. Thank you!!!

Norfazillah said...

Firstly i have problem with rthe instruction but thanks...it really helps

{pam} said...

the blogger.com instructions were clear as mud. thanx for making this soooo much more understandable!!

Dan Moriarty. said...

Hi Vin,

Thank you for the code. It works perfectly. I have changed it so that the expanded post opens in the same window. Is there anything I can do to add a 'Back to Blog' link at the bottom of the expanded post? It would just tidy things up a little bit!

Thank you! Dan.

Vin said...

Dan Moriarty,

The Post Page will open. Then clicking on the header gets you back to the Main Page as is common in all blogs.

Ali Sansoori said...

Hello, just wanted to say that I appreciate you helping others with the tips and tricks for blogger, I did everything you said step-by-step and now I have the expandable posts on my blog. Thanks a lot, it's just perfect!!!

Οικόραμα said...

Thanks a lot great job

Jonathan said...

Hey there,

your blog is great very helpful. i have the same request for not having read more at the end of every post. it is misleading and i don't want to lose the trust of my readers by making false promises.

would it be possible to use a similar style script, create a -span- tag for the "Read more" link, and create a variable that would make it invisible if there wasn't a "longpost" or something?

just an idea.


Christine said...

Thanks for your great hack. I’ve put it on my blog and it works. Can I ask one more question? The feeds still show the entire post contents, so I turned the Feedburner to show summary only. But, is there anyway to make the feed contents showing the same as the extracted part on the front page and hide the expandable part?
Thank you for any help in advance.

Vin said...


In your Settings---->Site Feed--->Posts set it to Short and save.

This is different from the expanded post summary but will show only part of the post.

Christine said...

Hi Vin,
Thanks so much for your prompt reply. I've tried to set the posts to “Short” format. The problem is that the image is gone. But I still want to keep the image in the feed content. If you go to my blog, you’ll know what I mean:

Thanks so much again.

Vin said...


In your Settings---->Site Feed set it to Full if you want to show images.

Keinton said...

how can i break up my old posts and move the 'read more' in to the middle of the posts instead of right at the end?

Vin said...


You need to edit only the posts which are on the Main Page and not ALL your posts. Open each post for editing and click Edit Html tab of post editor. After the first para add this code :

<span class="fullpost">

And at the end of the post add :


Then click Publish button.

Bewildered_Ronin said...

Woohoo! Thanks for the very clear and easy to understand directions! I'm just starting to delve into some of the CSS needed to tinker with my Blogger site, and this saved me a TON of time!

One thing, for others, (and you might want to add this) the Compose mode for creating posts likes to use < span> tags too, which can break your pages. You should go into Edit HTML and use < b> and < i>, etc. Also, the < p> tag seems to break this, too. Just a word of advice in case things go bonkers and you can't figure out why. :)

émilie said...

Thank you so much for posting this. I really need to have read more links on my page so that it would by all French on the front side with English translation shown only after clicking the read more link. Yay!

Pawan said...

Excellent! Just what a beginner like me was looking for! Worked like a charm1 Thanks :)

Anonymous said...

hey..tnx for the code


i have a question: so the read morre! stuff will be visible in each of my post even igf its not neccesary??? coz my post which dont not need read more it still have it!

Vin said...


Click +New Post link on Dashboard after login at Blogger.com. Post Editor will open with the code in it. Delete all the code. Type your post. Publish.

red bird said...

Thank you so much. I couldn't follow the official blogger guide but this was quick and easy.

Johnny Northside said...

THANK YOU, The blogger entry was SO confusing regarding how to do expandable links through Layout. I had the "Read More" on the main page down, but the blog kept publishing my entire post on the main page.

I could have save much frustration just going to your page first.


Visit these sites: said...



Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.