Monday, January 29, 2007

Expandable Post Summary for the New Blogger (formerly beta)

Update: Blogger have already implemented its own version of expandable post summary which they call JUMP BREAK and which require no or very little coding on your part. Being wanting to update this with a new post on JUMP BREAK but need pushing. If you are looking forward to reading a new post on JUMP BREAK, do give me a nudge at my contact form.


If you just want to read the instructions, click here
Update 3 March 2010: If your template doesn't have the line: div class='post-body'
look for
div class='post-body entry-content.
The above is from the comment of Kid Novice

Please also note that Blogger.com has recently introduced "jump break" which is what others call expandable post summary. Look out for a post detailing a test for their jump break,

What is expandable post summary

Expandable post summary is the term applied to blog posts where only short snatches (usually the first few paragraphs or sentences) are displayed with a link at the bottom that may say, usually, "Read More..." which if a reader is interested and when clicked, takes the reader to the full post. Expandable post summary is useful if you have the habit of writing long posts and you don't want your visitor to scroll through long line of text to see the next post in your main (home or index) page.

Instruction to implement Expandable Post Summary for New Blogger

To execute expandable post summary for your blog, the first thing you have to ensure is that "individual post page" (permalink) is enabled. Sign into Dashboard, then in the section for the relevant blog, click SETTINGS, then ARCHIVING and ensure that ENABLE POST PAGES is set to YES.

Next step: click the TEMPLATE tab, and highly advisable, click DOWNLOAD FULL TEMPLATE to backup your current template in case anything goes wrong or you want back your blog as they were before. Save it into a suitable folder with a suitable name like blog29jan07 or blog29jan07beforePostSummaryHack or something like that, so you can figure out why and when the template was saved. This is an important step you should take which you should not neglect. Make sure you have also backup the Page Elements as some will be deleted and some will become empty if ever you need to upload back your backup template. Then the backup Page Elements can help you quickly put back the deleted or empty Page Elements. See

Backup New Blogger template PLUS Page Elements and change new template

Backup New Blogger template PLUS Page Elements and edit template

The following instructions will need you to search for particular line of code in the template. There is a section "How to easily locate the code you are looking for" near the bottom of the post to help you quickly locate the code. So if you have problems is scanning through long lines of codes and do not know the trick on how to make it easier, scroll down the post and read that section first

Next, click EDIT HTML, then tick the "Expand Widget Template" and wait for the template to be fully expanded. In the template editor window, look for this line of code:

<div class='post-body'>

and just below that paste this code:

<!-- post summary hack begin -->
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<!-- post summary hack end -->


Note: I have added comments:
<!-- post summary hack begin --> and
<!-- post summary hack end -->
to mark the beginning and the end of the necessary codes. These comments are not essential, and do not do anything except to tell the reader of the program what the codes are for, where the hack begins and end and is a very common practice to document programs so that it is easier to read and understand, and to edit if necessary.

Amazon computer products

Now look for the following line of code which should follow immediately after the codes above:

<p><data:post.body/></p>

an then paste the following code after that line:


<!-- post summary hack begin -->
<a expr:href='data:post.url'>Click Here to Read More..</a>
</b:if>
<!-- post summary hack end -->


After the you have pasted the codes in the relevant places, the whole thing should look like this:

<div class='post-body'>

<!-- post summary hack begin -->
<b:if cond='data:blog.pageType == "item"'>
<style>.fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>.fullpost{display:none;}</style>
<!-- post summary hack end -->


<p><data:post.body/></p>

<!-- post summary hack begin -->
<a expr:href='data:post.url'>Click Here to Read More..</a>
</b:if>
<!-- post summary hack end -->

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

where the codes in black are the existing codes and the codes in green are what you add in. When done, save the template.

What to do when you prepare your post

When you type your post, where you want the post summary to end, add in this code:

<span class="fullpost">


and then type in the rest of your post. At the end of the post, just add the last line of tag:

</span>


If you want to make the above task easier, you can go to SETTINGS > FORMATTING and then in the POST TEMPLATE, add in these lines:

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


then save the settings. If you do this, then each time you create a new post, the above codes will already be in the post editor window. Then all you have to do is to delete "Type your summary here" and replace it with the beginning of the post you want displayed in the post, then delete "Type rest of the post here", leaving <span class="fullpost"> at the place where you want the post summary to end, and type in the rest of the post. The last line of the post should be </span> which had already been added in by the post template.

For me, (and for you, if you understand completely what is explained above), I would just type in the post template the following:

<span class="fullpost">

</span>


and leave out "Type your summary here" and "Type rest of the post here". Then you will not need to delete anything, just type in the part of the post in the relevant section.

If you are still not clear about how you should go about typing the post, I append below one of the posts I have typed for the post What is a healthy diet (scroll down to the bottom of the scroll box to see where the </span> is placed):

What IS a Healthy Diet
by: Chris Chenoweth

There is so much information about what is healthy and nutritious these days that it is very difficult to sort out the hype from the truth. Following a healthy diet can be accomplished by making some simple adjustments to your current diet.

If you think it is just too much trouble to make some simple changes to improve your family’s diet, think again. Most people do not realize the incredible impact that a healthy diet has on our bodies, making the difference between poor health and good health.

<span class="fullpost">

Along with regular physical activity, a healthy diet is the most important factor that determines your weight. If you are overweight or obese, your chances of developing many diseases or conditions, including heart disease, diabetes, high blood pressure, osteoarthritis, and certain cancers, increase significantly.

EASY STEPS TO A HEALTHY DIET

Your first step to following a healthy diet is to make sure you include food from all food groups. Vegetables, fruits, whole-grains, legumes, lean proteins and low fat milk products should all be incorporated into your daily diet.

*VEGETABLES – A diet rich in fruits and vegetables can lower the risk of heart disease, stroke, and cancer. It also contributes to a healthy weight, reducing your risk of obesity and the conditions associated with it. There are a multitude of vegetables to choose from, the healthiest being dark green vegetables like broccoli, lettuces, and kale, orange vegetables like carrots, sweet potatoes, and squash, and red vegetables like red peppers and tomatoes.

*FRUITS – Eat a variety of fruits each day, canned, dried, fresh or frozen. Stay away from fruit juices as they can be high in sugar. (Unless you make the juice yourself.)

*WHOLE GRAINS – Choose whole grain cereals, breads, rice, and pasta. Read the food label and make sure the grain that is listed such as wheat, rice, oats or corn is referred to as WHOLE in the list of ingredients. Whole grains are an excellent source of fiber. Fiber can help reduce your risk of diabetes, heart disease, and cancer.

*LEGUMES – This class of vegetable includes beans, peas and lentils. They are low in fat, contain no cholesterol, are high in protein, and have phytochemicals, compounds that help prevent heart disease and cancer. They are also a good source of fiber. Add pinto, kidney, black and garbanzo beans, split peas and lentils to your daily diet.

*LEAN PROTEINS – Choose lean meats, poultry, and fish. Bake, broil, or grill it. Do not fry! Beans, nuts and seeds also provide protein.

*LOW-FAT MILK PRODUCTS – Eat low-fat yogurt, low-fat cheese or low-fat milk every day. Dairy products can lower your risk of diabetes and help build strong bones, reducing your risk of osteoporosis.

There are a variety of foods that should not be present in your diet except in very small amounts. These foods, such as sugars, alcohol, and some fats, contribute to diseases and poor health.

*SUGARS – Avoid foods containing sugar. You know what they are! Always check food labels to see how much sugar is present as some foods contain sugar that may surprise you.

*ALCOHOL – Avoid alcohol. If you must drink, limit intake to one drink a day. Alcohol can increase your risk of many conditions including some types of cancers.

*FATS – There are different kinds of fat in our foods. Some are detrimental to your health and others are very healthy.

1. Monounsaturated fats (olive oil, flaxseed oil, peanut oil and avocados)

2. Polyunsaturated fats (safflower, sesame, sunflower seeds)

These fats raise your good cholesterol levels. To stick to a healthy diet, choose foods with these fats.

3. Saturated fat and trans fatty acids raise your bad cholesterol levels, contributing to your risk of heart disease. Limit your intake.

Saturated fats are found in beef, veal, lamb, pork, lard, butter, cream, whole milk dairy products and can be present in processed foods like frozen dinners and some canned food. Always check food labels before purchasing.

Trans fatty acids, the kind of fats that increase the risk of heart disease, are formed during the process of creating cooking oils, shortening, and margarine and are found in commercially fried foods, some baked goods, and crackers. When checking food labels, make sure the ingredients do not include hydrogenated fats.

Following a healthy diet is a necessary step for the improved health of you and your family. It is not difficult to make the simple changes necessary to change an unhealthy diet to a healthy one. The advantages, better health, longer life, and more energy, far outweigh any inconveniences you may experience.

About The Author
Chris Chenoweth is the author of the DO-IT-YOURSELF HOME, HEALTH & MONEY GUIDE, 500 pages of household tips, home remedies, diet and nutrition information, health issues and thousands of recipes! Money Home Biz. If you would like additional information on healthy ways to lose weight, learn how to burn fat with one of the most effective and healthy fat-burning systems available, the BURN THE FAT program. Burn the Fat
</span>


How to easily locate the code you are looking for

To make your task of scanning the long lines of codes in the template, press ctrl+F and a Find [ ] will appear at the left of bottom of the browser. Tpye all or part of the code you are looking for and the scrollbar will scroll down to the part where the code is located and highlight it. See screenshot below:



Do all the necessary editing and preview. If everything seem OK, click "Save template" and VIEW BLOG" to ensure everything is OK

If this method don't work, click on the inside of the template editor window and press ctrl+A (or right-click and chose "Select all") to highlight all the template. Click ctrl+C (or right-click and chose "copy") to copy the template into clipboard, open a Notepad file, click ctrl+A again (or right-click and chose "Select all"), then click EDIT > FIND in the menu bar of Notepad at the top (or press ctrl+F), and in the "pop-up" FIND box, type or copy all or part of the code into the box and click "Find Next" and again the code you are looking for will be located and highlighted (see screenshot below):



Do whatever editing you need to do, then press ctrl+A (or right-click and chose "Select all") to highlight all the edited template in Notepad to copy into clipboard. Go back to the template editor. The whole unedited template should still be highlighted. Click the DELETE key and the template editor window will become empty. Paste the edited template into the empty template editor window, preview, then save.



Update 10 March 2007: There have been numerous enquiries about how to not display the "Read More..." link in short post with nothing additional to read. Unfortunately, this hack will place the "Read More..." even in short posts. Perhaps a good way to let your readers know that there is no more is to add in the word END OF POST. THERE IS NO MORE at the end of the short post.

This can be done by adding the HTML shown in the scroll box below:

<span style="color:red;">END OF POST. THERE IS NO MORE</span>
.

Alternatively, if you don't want "Read More" to appear in short post, refer to Testing Hackosphere peekaboo expandable post summary. This long post Guanxi. The First Word in Chinese Trade. On the other hand, a short post in the same blog Why the emphasis on things Chinese has no "Read More" at the bottom of the post.

UPDATE: This is in response to a reader who asked if the "Read More" can be made bigger. Yes, it can. The way to do it is simple. Simply surround the "Read More" with an inline CSS as follows:

<!-- post summary hack begin -->
<a expr:href='data:post.url'><span style="font-size:150%; color:red;">Read More......</span></a>
</b:if>
<!-- post summary hack end -->


I have, in addition to increasing the font size by 50%, have also changed the color to red so it is more visible. If you don't want the red text, just leave out color:red;

You can see this hack in this blog: Buy or Sell Advertising


Update 21 April 2007: Someone asked for help because she spent hours and couldn't implement this hack. The reason was she used a non-standard template and <div class='post-body'> didn't exist in her template. I had to spend some time to find the alternative place to paste the script for the hack. See the comments.

Update: 27 April 2007: A blog reader asked how to make the "Read More" link open in new window. I think it is not wise to have links to the same blog open in new window, but if you still want it, add target='_blank' to the script


<!-- post summary hack begin -->
<a expr:href='data:post.url'>Read More......</a>
</b:if>
<!-- post summary hack end -->


so that it becomes


<!-- post summary hack begin -->
<a expr:href='data:post.url' target='_blank'>Read More......</a>
</b:if>
<!-- post summary hack end -->


Update 16 May 2007: This hack will show "Read More" even for short post. You have another alternative. Have a look at this post: Testing phydeaux3 peekaboo expandable post summary

Update 22 May 2007: If you are worried about the effect of implementing expandable post summary for your blog, I did a test and it should have no effect. See post Expandable post summary and search engines

Acknowledgement: This post is a redo of Ramani's Expandable post summary with beta hack which I believe contain some additional information you should know when doing the hack plus I have attempt to make it easy, clear for those new to Blogger to follow the full instruction and implement it.

214 comments:

  1. Peter-
    I realize this isn't the subject, but can you address answering invites/dashboard bugs with the new version Blogger?

    I recently switched my blog over to "beta", have been invited to join a new blog group, answered the invite, but it will not show up in my dashboard, nor do I have privileges to post there.

    Do you have any thoughts on the matter?
    thanks,

    Paul

    ReplyDelete
  2. Thank you so much for posting the steps in such a clear manner. I was having problems implementing this trick until I found your explanation. It works great!

    ReplyDelete
  3. Thank you very much! It was exact feature I was looking for.

    ReplyDelete
  4. can this be done with the old template?

    ReplyDelete
  5. No, the method described in this post is only for New Blogger. For old classic template, refer to How so I create expandable post summary. However, I have tried that in my classic template blog and it didn;t work.

    Peter a.k.a. Enviroman
    Enviroman Says

    ReplyDelete
  6. Thanks. This was very helpful (much better than the Blogger explanation). Cheers.

    ReplyDelete
  7. Thank YOU!!! I couldn't get the hack they suggested to work.

    ReplyDelete
  8. Thanks for posting this. I have been struggling with this hack all morning and now I see that I was not alone. This explanation is very clear and finally got the thing working for me.

    ReplyDelete
  9. I can follow your directions until you say to click on "Expand Widget Template". Where is this found?

    ...Ah, I have to click "Edit HTML" first. You might want to add that step to your directions.

    ReplyDelete
  10. Once I made that change to your directions, it worked fine. Thanks! Blogger's help page on this issue leaves out a few steps that you have filled in.

    ReplyDelete
  11. Hi Jack,

    You are right. I left out that step. It has been corrected, thanks to you.

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  12. Great tutorial. This was killing me.

    Is there a way to prevent the "Read More" link from appearing in short posts? Or is it only popping up every time because I'm doing something wrong?

    Thanks,
    Joe

    ReplyDelete
  13. Excellent tutorial!!!

    However, all the pictures in my post appear with my summary even when i place them under the summary field. Is there a way to make them appear only with the full post?

    Thanks in advance!

    ReplyDelete
  14. Unfortunately, there is no way to prevent the "Read more from popping up even in very short posts.

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  15. To Wudang Greece,

    I have tested placing a picture below the summary field in this post Testing to see if pictures placed below the summary field will appear in the condensed post, and they don't appear above the "Read More". They become visible only when you go to the full post.

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  16. This is exactly what I was looking for! Thanks hugely.

    One question - can we make the "read more" text bigger?

    ReplyDelete
  17. Oh I see - just added a bold tag. Duh. Thanks again for the wonderful tip.

    ReplyDelete
  18. Yes, it is possible to change the font size to a bigger font. I have updated the post to show how to do it. Refer to the bottom of the post. If you want to see an example of a blog using what I have suggested, have a look at Site Promotion Tips.

    I have increased the font size by 50%. You can change the font size by whatever %age you wish.

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  19. To Peter Chen:

    I visited your testing page and, although i see no "Read more..." link, your picture does not appear with the summary.

    That does not happen in my post! :( You can see that if you visit my page at wudang-greece.blogspot.com (top post). What am i doing wrong?

    Thanks again.

    ReplyDelete
  20. Hi Wudang Greece,

    You are the second peroson who asked this question. I have tested the hack on another blog Testing Expandable Post Summary and the picture I posted below the <span class="fullpost"> tag did not appear in the summary part of the post.

    Maybe you can explain what you did that cause the pictures to appear in the summary part of the post.

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  21. Hello Mr Chen,

    I just used the "add picture' button to add an image to my text. At first, the image appears at the top left of my post (within the summary field) and then i click-and-drag it with below the summary field.

    Should i add images in another way so that they can appear with the full post?

    Thanks!

    ReplyDelete
  22. Hi Wudang Greece,

    I am most comfortable with posting in the EDIT HTML mode, so have not come across having to drag and drop the picture when using the expandable post summary, and too lazy to test it out. I would suggest you use EDIT HTML mode when using the expandable post summary as I think that is the easiest way to do it. If you want the picture to appear only in the full post, and not in the post summary, just cut and paste the HTML for the picture below the <span class="fullpost"> tag.

    Peter
    Dummies Guide to Google Blogger

    ReplyDelete
  23. Many thanks Mr Chen,

    Your replies were fast and accurate, a rare combination indeed.

    My blog finally looks the way i want it to look! :-)

    Thanks again!

    ReplyDelete
  24. Appreciation greatly appreciated. Thanks.

    Peter
    Natural Remedies

    ReplyDelete
  25. I have just included this hack on my templete, but it doesn't work properly on Internet Explorer 7, because the main page doesn't show the sidebar, while the permanent link document does show the sidebar.

    ReplyDelete
  26. I have tested it in this blog Good Health Information and again in this blog
    Site Promotion Tips but this time with the "Read More" font 50% bigger in size, and in red color. I viewed both in IE7 and I could find no problem. I just checked.

    Peter
    Natural Remedies

    ReplyDelete
  27. Thank you, Peter, for your quick response. I have tried the hack with two other original templates in my blog and it doesn't work on IE7 either. And I have seen the two pages that you tested and it works well on those. I'll see what I do.

    ReplyDelete
  28. Awesome. I added the Read More. I'm so Happy! One step at a time. I've read a little bit about 3 column templates. But I have to log in to a 3rd party to get the html? I'm a little hesitant. Anyways, I'm still reading up on it. Thanks again for the link to that hack.

    ReplyDelete
  29. Big thanx! :)

    May be will be useful to send it to Help Center? Let them correct those text about this hack: I try use that one and waste more than 4 days.

    Now all is working properly. Thanx a lot!

    ReplyDelete
  30. wondered if i can customised or have the expandable post function only when i want it to happen?

    cos i dun want all my post to have this option. thus controlling where and which post to have this option.

    and on the same note, if there an option, for say for the reader to click to reveal the answer of the post. like a small click say: click here for answer. is that possible?

    thanks.. hope everything makes sense.
    and thanks for the tips for the 3 columns..thanks! ooo on these, is it possible to move the left side bar to the right side next to the existing right sidebar. ie. body, side, side. rather than side body side.

    again. hope everything makes sense. thanks

    ReplyDelete
  31. Hi Bidarlah,

    Unfortunately, with this hack, you will have a "Read more.." at the bottom of every post even if that is a short post with nothing else to read. Perhaps a good way around that will be to put the word "END" at the end of every short post.

    Regarding shifting of the sidebar, see if this post can give you some ideas about how to do what you want to do: How to make the sidebar display on the left.

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  32. Peter,

    I have been trying this for hours. I was able to input all of the hacks into the HTML code. However, when I type a post and hit publish my writing does not show up. the only thing that shows up is the "Read more...." link. Can you help me with this please?? thank you!

    ReplyDelete
  33. Hi Jon,

    I and others have used the instructions to incorporate "Read More.." into their blog posts without problem. Are you sure you are following the instructions to the letter? I suspect you have typed the text of your post after <span class="fullpost">. You must type the summary before <span class="fullpost"> and then the rest of the post after <span class="fullpost"> and at the end of your post, you must have a </span>

    Hope this is of some help to you.

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  34. I did do all of that, Peter. Is it necessary to included the indentations in the html text or can it all be alligned to the left.

    ReplyDelete
  35. I didn't do any indentation, and I think paragraphs are not indented by default.

    Peter a.k.a. enviroman
    Enviroman Says

    ReplyDelete
  36. Peter,

    Thank you very much for your help. As it turned out, I was able to make it all work at my home on my Mac. For some reason it wouldn't work at my job on the PC. Thank you again!

    ReplyDelete
  37. Your directions are explicit and helpful.
    However, when I attempt to use your script to modify to get 150% sizing and the color, it refuses to either save the template or preview it, based on a failure to close.

    Is there a < or > or ,/ missing somewhere in the size/color coding?

    ReplyDelete
  38. Why don't you post what you try to post here so we can have a look.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  39. Peter

    Your site has been a revelation. This is the first time i have come across easy to use blogger instructions.

    lifesaver! thanks

    ReplyDelete
  40. Thanx! This saved my day today. I lost already couple of days trying to get this work, with other blogger "Help" and almost gave up.

    ReplyDelete
  41. Hi Peter,

    I am a newbie to this blogging thing. Just starting it out as late as mid march 2007. I really love this blog of yours. Full of information for newbies like me. I must thank you for all the tips and tricks that u had shared with us.

    I am having this problem now with expandable post summaries. I am having a 3-column template. main body(for writing up the post) of the template on the left with 2 sidebars on the right side of the main body.

    I had done exactly per your suggestion but somehow i noticed that the sidebars do not appear on the main page. clicking on the read more... as expected brings out the full post complete with the 2 sidebars.

    How can i make use of the expandible post summary without compromising the 2 sidebars?

    ReplyDelete
  42. You did not provide the URL to your blog, so I can't tell, but I am guessing you have some post in your main column which pushed the sidebar to the bottom of the page (they haven't disappear. I think if you scroll down, you will eventually see them). Refer to this post: What to do? Sidebar slide to bottom of he post and see if you can find the cause and correct it.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  43. This comment has been removed by the author.

    ReplyDelete
  44. Hello Mr Chen,I send you an e-mail.
    Thank you!

    ReplyDelete
  45. Peter, in this moment it seems it works!! Thank you so much for your help, you are the best!

    ReplyDelete
  46. I've tried this a million times and it just doesn't work.... I don't know if this is too much, but Can I send you my template for help?
    Thanks anyway
    Paula (Buenos Aires)

    ReplyDelete
  47. Hi Miss Pau,

    Are you using the New Blogger template? If so, you may send me the template. No promises, but time permitting, I may help you. Also, please note that New Blogger is very sensitive, eg, if the template is done in Notepad and Wordwrap is enabled. They may reject the template.

    A lady in US also requested for help with a 3 column template, have offered to pay me, and has given me the username and password to her Blogger account to enable me to do what she needed. It had been done successfully, and I have requested that she change her password so that if anything happens, I will not fall under suspicion.

    I can do it for you for free, but I am not opposed to accepting donation. Alternatively, like any other bloggers, I am hard up for links. I will appreciate links to my blog/blogs in the sidebar or in a post. However, these are not compulsory, it is purely voluntary, and time permitting, I will still help irrespective of what you do.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  48. Thank you so much. Will do the link and donation via Paypal if you help me (do 5 dollars for each hour it takes you sound ok?).
    If I send you the template can you test it in your blogger account? If not, I'll provide my user and pass.
    Thanks again,
    Paula

    ReplyDelete
  49. Hi Miss Pau,

    You can send me the template, but the process may be more difficult. If you want to do it that way, my email address is bloggerfordummies at gmail dot com. My Paypal email address is cikguas227 at yahoo dot com

    Email me directly (email link in the sidebar) if you need direct communication, which may be easier.

    Giving me the username and password will be much easier and less problematic. Just make sure you backup the template first. Back it up more than once and save it in 2 different place. Then you will have peace of mind. If you don't want me to know your current password, you can temporarily change it to a different one and change it back after everything is done.

    Someone has done it this way before (given me the password) and there had been no problem.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  50. Hi Miss Pau,

    Just one more thing to add. I am a retired scientist with a reputation to protect. I wouldn't want to do anything to spoil that.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  51. I've just e-mailed you, thanksss!

    ReplyDelete
  52. The expandable post summary hack have been successfully implemented for Miss Pau. She used a non-standard template, and the method described in this post did not apply. It was fortunate I was able to find the alternative place to paste the scripts.

    Peter
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  53. A newbie here. Thanks for this tutorial. It was great. I've done one thing incorrectly and can't figure out how to remedy it. No summary comes up. What must I do to fix this?

    Thanks in advance!

    ReplyDelete
  54. Hi Ana,

    Most readers have found the instruction easy to follow, but there was one who just couldn't do it after spending hours. She asked for help and I offered to do it for donation (no amount too small) plus links to my blogs. She gave me the username and password to her account. I found that she was using a non standard template. It took some time, but the job had been completed.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  55. Nevemind my question. I went through your instructions again and redid the thing numerous times and voila! Your instructions worked. I haven't a clue what I did incorrectly. No biggee. I'm a VERY happy new blogger!

    0nce again, thanks!

    ReplyDelete
  56. Thanks a lot for the help! The official blogger help wasn't any good, and I don't know much about html.

    Only one small correction, that I had to figure out myself. In your example html text to make the post 150% bigger and red, you left out a ">" just before the "read more". Otherwise, its an invalid code and won't work.

    ReplyDelete
  57. Hi JR,

    Sorry about that little error. It has been corrected. Thanks for pointing it out. Good thing you could figure it our yourself.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  58. Hi Peter
    I find your blog very useful. I am a new blogger and I had emailed you personally sometime back with a query. I found my way around that problem. I just want to say thanks for all the help and advice you give on your blogs and appreiciate the good work you are doing.
    Beena

    ReplyDelete
  59. Hi Eternalsoul,

    Thanks for taking time to express your appreciation. Very much appreciated.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  60. Yes! Thanks so much, you really helped me. I was just about to give up on this expandable summaries thing-a-ma-jig! You made it very simple and easy to understand. That's the sign of a good teacher! :)

    ReplyDelete
  61. Having googled a lot this is by far the most convenient & easy to understand instruction way (together with what can be found in http://villageidiotsavant.blogspot.com/2006/12/expandable-posts-with-new-blogger.html)

    The problem still remains: Firefox works fine, IE (6 or 7) does not display it properly (the screen freezes in the first instance of "Read more" and displays nothing below that - main or sidebar widget content)

    Any workaround ?

    ReplyDelete
  62. Hi Drapper.

    I have expandable post summary implemented for this blog:
    Site Promotion Tips. (ignore the latest post which is a short post).

    I viewed it with IE7. I had no problem. Why don't you try viewing it with another computer?

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  63. Thank you for looking at the site. Right now I have the expandable posts disabled. I enabled them again today and viewed the page from 3 diffrent PCs (one from home, one from my wife's office and one from my work - all with IE 6) without any success. IE7 may work but I haven't tried it yet, but with IE6 (which may be outdated but it still quite common browser in Greece) doesn't work.

    ReplyDelete
  64. My mistake! The first message had a bold font at exactly the last word and instead of two (/span) closing the message had one, therefore the first (span class="fullpost") never closed thus creating the problem. Views fine now! Thanks for your time anyway. Your site has very good information for beginners like me!

    ReplyDelete
  65. Hi Drapper,

    I am guessing you are having problem trying to display </span> because I see you typing as (/span). If you want to know how I got it displayed correctly, refer to this post: How to post special characters. You can use it for the posts as well.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  66. Hi Mr. Chen,

    I have a question about resizing the text. I used your tip to resize, and re-color my "Read More", and it worked very well. But now it dwarfs my "Older Posts" at the bottom of the page. Is there another hack to make the "Older Posts" tag bigger as well? Thanks!

    ReplyDelete
  67. Hi Duncal,

    I am afraid not. I tried, but it affected only X COMMENTS, not Older Posts. See Pictures Side by Side

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  68. THANK YOU!! I was having a horrible time trying to figure this particular hack out, but you made it easy!

    ReplyDelete
  69. Okay, thanks very much for trying. I'm very happy with the way my page looks now. Thanks again for your help. Now I check here first when I have a technical problem with my blog.

    ReplyDelete
  70. Hello Peter,
    I have a question, how can I manage expandable post summary with older posts I published? I've done exactly what you said and it works on new post but in my older posts the "read more" link is displaied at the end of the whole post and I can't do anything to change it.
    Thank you I always find your suggestions really useful!

    ReplyDelete
  71. Hi Ambra,

    You have to edit your old posts one by one. You got to paste

    <span class="fullpost">

    in the part of the post where you want the summary to end, then paste

    </span> right at the end of the post.

    Peter (Blog*Star 2006 and 2007)
    Blogger Tips and Tips got listed in DMOZ, the most important directory and the most difficult to get listed in, plus link to site with tips on how to get listed in DMOZ

    ReplyDelete
  72. Hi Peter, thank for your answer.
    Well, I already tried to edit my old post one by one but it didn't work, the "read more" link always stay at the bottom of the text. I'll try to delete the whole text of the post and write it again but i'm afraid it won't be indexed by google..does it happen when edit old posts?
    Thanks a lot

    ReplyDelete
  73. Hi Ambra,

    I don't know why you are having problems with old posts.

    Regarding search engines, I have done tests and you can read about it here: Expandable Post Summary and Search Engines.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  74. You are the man! Many thanks for the hacks!

    ReplyDelete
  75. thanks for posting these steps they look really good.

    The thing is when I edit my html template I do not see anything which says "expand widget template"
    class='post-body' either. I am using the new versions of blogger.

    ReplyDelete
  76. Hi Richard,

    Look at the screenshot in this post: New Blogger Expand Widget Templates. It is circled in red.

    Peter (Blog*Star 2006 and 2007)
    Generating Revenue from your Website

    ReplyDelete
  77. Thanks very much for taking the time to show a screenshot. The strange thing is that on my templates it looks quite different. Unfortunately I seem to still have the old style with no option to backup template e.t.c.

    I upgraded the template on a blogspot blog, however, it says it is not possible to upgrade on my blogs hosted on other sites. It seems a real shame, but thanks anyway.

    ReplyDelete
  78. Hi Richard,

    I think I see the problem. You are hosting your own blog and using FTP to publish your posts. That means you can only use classic template. Try this:
    Expandable post summary with old classic template.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  79. Hi Peter, I've used this code for expandable posts, and t works fine in Mozilla and SAfari, but with IE I cannot see my navbar and all the post: any idea?

    The blog is blog.relactions.com

    Thanks a lot!

    Marty

    ReplyDelete
  80. Hi Peter, I've used a wrong account for my previous comment - can you delete that and publish this one? Thanks!

    I've use this code for expandable posts, and t works fine in Mozilla and SAfari, but with IE I cannot see my left navbar and all the posts (I can see only three): any idea?

    The blog is blog.relactions.com

    Thanks a lot!

    Marty

    ReplyDelete
  81. Hi Marty,

    I visited your blog with IE7 and can see the navbar clearly. Here is a screenshot:
    Reflection Blog.

    Peter (Blog*Star 2006 and 2007)
    Generating Revenue from your Website

    ReplyDelete
  82. Peter - Is this change supposed to also affect the feed from the blog? I get the expandable post, but the feed seems to be the full post in a feed reader.

    ReplyDelete
  83. Hi Doug,

    To the best of my knowledge, the hack does not affect the feed. Whether one gets full or summary depend on how one set the feed. I have yet to test this, but I believe it to be true. Maybe I will test it out one day if I have the spare time but it is not my priority.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  84. Hi Doug,

    Why I think that way? I used a site to see how a spider view a site and checked a demo blog with post summary, and it displayed the whole post. I was interested in that because I want to know if post summary affect the way search engine spider index our blogs.

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  85. Thanks for this great post. All the steps were easy to follow and worked first time :)

    IxD - The Interaction Design Blog.

    ReplyDelete
  86. Hi Peter:

    Great blog. Quick question:

    How would I move the "read more" to the right side?

    Keep up the good work.

    Mike
    www.roundtablepictures.blogspot.com

    ReplyDelete
  87. Hi Mike,

    I did some tests on the test blog Internet Tips and Tricks but somehow the Read more..... ended up at the top of the post. I will need to do more testing but at the moment I have a lot of things to finish, so what I will do is to copy the URL of this post into Notepad and save it to my "to do" folder. But there are a lot of to do files there already, don't know when I will get to this one.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  88. Thanks man. It worked for me.

    ReplyDelete
  89. Hello.

    Great helping site this one of you!!!
    Implemented the tips for shortening my long posts but i think i made something wrong because the posts are still long but now they have also the feature "Read more".
    In the end of each post i had some affiliate banners when i inserted your tips, probably the problem was those banners.
    I removed them to see if the long posts would shorten but they still have the long view format.

    Can you help me?
    Thanks

    tradingeapostas.blogspot.com

    ReplyDelete
  90. Hi Lusoricas,

    Did you put

    >span class="fullpost"<

    at the part where you want the post summary to end?

    Peter (Blog*Star 2006 and 2007)
    Dummies Guide to Google Blogger
    "online book" in progress

    ReplyDelete
  91. No, i didn't.
    I put that code on the html template of the page and not of the post.

    So your suggestion is to edit the posts, enter that codes where i want the summary ends and then it should be fine, right?
    I'll try that way.

    By the way, i have already saved your post template advice for the upcoming posts so that everyone should automatically be short :)

    Thanks

    ReplyDelete
  92. I managed!!!!
    But only in the longer post :(
    Can you tell me why my other post don't have the same summary?
    I copied the codes like in the other post.
    Could it be because it has fewer lines?

    Thanks

    ReplyDelete
  93. Hi Lusoricas,

    I am afraid I have no interest to implement in my main blogs like this one which have old posts, so really can't comment much except to speculate. I am guessing when you implement for blogs with old posts, the Read More... will appear at the end of posts, and you will only have them separated when you put
    <span class="fullpost"> at the point in the old post where you want the post to end, and then
    </span>
    at the end of the post. However, I am in no position to test as I don't want to try it for this blog which have plenty of old posts.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  94. This all seemed to work well. Looked great. Then when I clicked on 'read more' on each page, I got 'page not found, error' and all that kind of stuff.
    What did i do wrong.

    Paddy Murray

    ReplyDelete
  95. Hi Paddy's World,

    Have you checked to see if you have enabled individual post page (permalinks)? Refer to Changing Settings.

    Peter (Blog*Star 2006 and 2007)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  96. hi, peter.

    this is a great thing you are doing, helping bloggers with their pages.

    i have a little problem with the expandable summary though. i did what you indicated and ended up with posts that has read more at every page.

    so i decided to just take away the expandable summary thing by pasting the old html settings of my template. i also removed the thing i pasted on post template in my settings.

    despite all that, the read more is still there. how do i get rid of it? i have gone to the extent of re-posting the template from scratch.

    i would highly appreciate your answer.

    anj

    ReplyDelete
  97. hi, i was the one who asked about removing the read more expandable summary... i seem to have removed it already. thanks!

    ReplyDelete
  98. Hi Anj,

    I am assuming you have the text template minus the editing you did for the post summary and you deleted what is inside the template editor first?, copy-paste old text template into post editor and saved? If you had done it correctly, you should get your previous set-up, with probably a few Page Elements deleted or empty.

    However a better way of backing up the template is click "Download Full Template" which will then be saved as an xml file and when you need it, click "Browse" then "Upload". Refer to
    Backup and edit New Blogger template
    and
    Backup and change New Blogger template.

    However, I really don't know what is happening on your end. Maybe the best thing for you to do is first backup your current template (with new filename plus desciption of what was done plus date) AND Page Elements, change to a new standard Blogger template (pick new) to get rid of whatever is causing your problem, then upload the template you used originally and start all over again. The saved Page Elements will make your task easier.

    Peter (Blog*Star)
    How you can help Blogger Tips and Tricks
    (no one should feel obligated. Everthing completely voluntary)

    ReplyDelete
  99. I can't find --div class='post-body'-- in my template. Can you or someone help me with this?

    ReplyDelete
  100. Hi jezzebel,

    1. Are you using old classic template of New Blogger template? To distinquish, refer to Old classic template or New Blogger template?.

    2. Did you enable individual post page (permalink)?

    3. Did you tick [ ] expand widget templates?

    Peter (Blog*Star)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  101. Hi Peter Chen,
    I follow exactly what you have laid out but received this error message:
    "More than one widget was found with id: HTML28. Widget IDs should be unique."

    Please advise further.

    Thank you.

    Regards,
    lawrence

    ReplyDelete
  102. Hi Peter,
    I have a question for you. Is it possible to make an expandable post summary with a sticky "welcome" post? (wOOOw, hope you understand what I mean). I edited my template and can now make EPSs. But when I try to do so with that sticky post, the post is cut and there's no "Read More" below.
    Thank you for this wonderful blog and for helping all of us out.

    ReplyDelete
  103. Hi Festiva,

    New Blogger is very fussy with template. Even when I do what I believe is correct, I have got those error messages before. In fact, once I got an error message that mention something about a widget which I am very sure I don't have (can't remember what it is now).

    In one case I had problem and I only solved it by changing to a standard Blogger template, change back to the previous template minus all the modification and start all over again.

    Other people who had problem with this hack did not put a space where there should be one. A lady from Argentina used a template which didn't have the code mentioned in the post. I had to check to see which alternative place I can put the additonal codes to get it working. Took me a long time. But I was paid.

    In your case, I don't know what is the problem. May be something similar with the case where the error message says I have something which I am very sure I don't have in my template.

    Sorry, can't help much beyond this.

    Peter (Blog*Star)
    Alternatives to AdSense

    ReplyDelete
  104. Hi Maimona,

    "(wOOOw, hope you understand what I mean)."

    Sorry, you guessed it. I don't understand.

    Peter (Blog*Star)
    Natural Remedies

    ReplyDelete
  105. Hi Peter,

    Sorry for not making myself clear. I have a sticky post and I'd like to make it expandable. Do you think it's possible?

    Thanks,
    Sadie.

    ReplyDelete
  106. Hi Maiimouna,

    Regarding the "sticky post", if you did it using this method Change order of post, the answer is yes.

    If you did it using Adsense, "sticky post", etc above the main column, like this blog Blogger for Dummies, then it is not possible.

    Peter (Blog*Star)
    How you can help Blogger Tips and Tricks
    (no one should feel obligated. Everthing completely voluntary)

    ReplyDelete
  107. Thank you so much Peter for your help!
    Sadie.

    ReplyDelete
  108. do you know how to add "read more" with the classic template? I managed to put read more on my blog but it still had the full post with read more on the bottom. Plus, the read more was after the labels. Any help?

    ReplyDelete
  109. I tried that one and I get "read more" but the posts are not shortened. It is the full length with read more at the bottom.

    The link you provided says this:

    Paste the following codes into your CSS (Cascading Style Sheet. It will be the section between the style and the /style tags in beginning of your template.)

    Im not exactly sure where this code goes - i put it right at the beginning of my template where it it says:

    html
    head
    title $BlogTitle$ /title
    $BlogMetaData$
    style type="text/css"
    I inserted the code here...

    is that right?

    ReplyDelete
  110. Hi Clay,

    You are not reading the post properly Clay. It says to paste it after

    <div class='post-body'>

    Also, note that the instruction says to tick the [ ]Expand widget template

    Other things to do, You have to look for

    <p><data:post.body/></p>

    and paste another set of code.

    These are to be done in the template.

    In the post itself, you will have to put

    <span class="fullpost">

    in the post where you want the post summary to end, and at the end of the post, add

    </span>

    Please remember to backup your current template PLUS the Page Elements before you make any changes. Refer to Backup New Blogger template PLUS Page Element and edit template.

    I will have to edit the post to show how to make finding the code easier.

    Peter (Blog*Star)
    How you can help Blogger Tips and Tricks
    (no one should feel obligated. Everthing completely voluntary)

    ReplyDelete
  111. Thanks Peter - I guess the confusion is I dont have < div class='post-body '> or
    < p >< data:post. body/ >< /p > in my template at all. I also dont have widgets. I have a classic blogger template. Maybe it just cant be done.

    ReplyDelete
  112. I can't tell you how helpful this was. Ramani's instructions on Hackosphere always gave me errors, but yours worked like a charm.

    A million thanks!!!!

    ReplyDelete
  113. Thanks a lot... you saved me probably days of irritation trying to figure it out myself.

    ReplyDelete
  114. Hi Marc,

    Thanks for your kind words of appreciation. I encourages us and help us continue especially when we meet some funny characters on forums who criticize us when we link to our posts.

    Peter Blog*Star
    What a grateful blogger did for me
    (no one should feel obligated. Everything completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

    ReplyDelete
  115. Hi, I'm pretty new to this whole blog thing and need some help, please.

    Up until yesterday, I was using this hack to get the "Read more" link in my blog posts. Last night, it just stopped working in all new posts and just cut the posts off at the [span class="fullpost"]. After messing with it all day, I gave up and updated my template today, thinking it'd be easier for me to find code relevant to the newer templates.

    Now I'm another user who doesn't have a [div class='post-body'] line and have no idea where to put the rest of the code. I'd really appreciate it if you could help me with this. In exchange, I'd be happy to make a small donation to your blog.

    Thanks!
    Dayna

    ReplyDelete
  116. Hi Dyana,

    A lady from Argentina had the same problem as you as she couldn't implement post summary and offered to pay for me to do it for her. She offered a rate per hour of work done.

    I did manage to find the proper place to put the necessary script, but that was a long time ago. Further, I don't know what template you are using, and I wouldn't know how long it would take for me to get the thing working for you with your template.

    Anyway, you can contact me by clicking "Click here to contact me" near the bottom of the left sidebar and we will see if thing can work out.

    Peter Blog*Star
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  117. Hello Peter,

    To a newbie like me, your simple and easy to follow directions are godsend. Thank you. Perhaps, you can extend more help. No matter how often I checked and re-checked your directions, the Read More goes down below the summary, about three or more paragraphs. When i click on it the full post does not have gaps. Where could I have committed an error? Thank you.

    Maya

    ReplyDelete
  118. Hi Peter,

    I sent a query earlier on how to narrow the huge gap between the end of the summary and the Read More link. I found the solution after more tinkering with the post, what should have been obvious from the beginning.... shorten the post since it is only a summary.

    Maya

    ReplyDelete
  119. Hi Maya,

    Thank for your kind words.

    "the Read More goes down below the summary"

    Sorry not clear about your problem. Your statement seems to indicate that it is working as it should, read more appears below summary, but maybe you meant something else. You will need to clarify.

    "the full post does not have gaps"

    Again I do not understand. The full post is not supposed to have gaps. If there are gaps, I would be worried. Hope you can explain.

    Peter Blog*Star
    Generating Revenue from your Website

    ReplyDelete
  120. Hello Peter,

    The problem was a huge space between the end of the short post (you referred to this as snatch in your article) and the Read More link. There was like about three paragraphs blank space. When I limited the number of paragraphs for the snatch, the huge space decreased. But I soon discovered after sending my 2nd message to you that this is not really the operative solution. After testing it several times with old and new posts, I found that removing the code span at the end of the first paragraph immediately after the code for the fullpost, the blank space is removed. The result is much neater.The Read More link is just right below the last sentence of the shorter post or snatch.

    Maya

    ReplyDelete
  121. Hi Peter chen,
    At first i didn't took much notice of 'Importance of anchor text in hyperlinks'. Now i got it. Thanks for your advice. Yes i agree to what you said "your visitors as well as the search engine spiders will at least know what the site linked to is all about", it is also helpful for my blog.

    Admin
    blogger-toolkit.blogspot.com

    ReplyDelete
  122. hi Peter

    i'm wondering how come i cant find those lines you referred on my template...:(

    do you have any idea??

    ReplyDelete
  123. Hi Raddie,

    I know the list of comments is very long in this post, so you probably missed one of my reply that has a section relevant to your question. The section is further down, something a about a lady from Argentina:
    ===============================
    Hi Festiva,

    New Blogger is very fussy with template. Even when I do what I believe is correct, I have got those error messages before. In fact, once I got an error message that mention something about a widget which I am very sure I don't have (can't remember what it is now).

    In one case I had problem and I only solved it by changing to a standard Blogger template, change back to the previous template minus all the modification and start all over again.

    Other people who had problem with this hack did not put a space where there should be one. A lady from Argentina used a template which didn't have the code mentioned in the post. I had to check to see which alternative place I can put the additonal codes to get it working. Took me a long time. But I was paid.

    In your case, I don't know what is the problem. May be something similar with the case where the error message says I have something which I am very sure I don't have in my template.
    ================================

    Peter Blog*Star
    Natural Remedies

    ReplyDelete
  124. hi,
    I wanted to add READ MORE to my blog posts, i have read your post on Expandable post summary.

    I dont have any programming knowledge.

    I found that my blog code is entirely different from what you have said in Expandable post summary. I didn't found 'post body' in my blog code. Please help me. hariharakumar2000 at gmail dot com is my mail id. I can send you my blog xml file to you, if possible to make any changes required to it. Please help me.

    Hariharakumar

    ReplyDelete
  125. Hi Harihara,

    A lady from Argentina had the same problem. Offer to give me her user name plus password and offered to pay me to do it for her. I had to search for the alternative place to put the script, and also it was a long time ago, and I can't remember what I did. Plus it would be work.

    Peter Blog*Star
    The easiest way to earn something for your blogging efforts

    ReplyDelete
  126. ITS NOT WORKING ON MY BLOG!

    ReplyDelete
  127. Hey ... i sucessfully added read more to my blog, but what i want is ... when ppl click on this link which says read more ... i want to display a popup to another link which will open in another window ... and also the full post body in the same window as usual ... hope u got my point ... any idea how to do it?

    ReplyDelete
  128. Hi escochar,

    All post tested before published plus from comments above, you would see quite a number have successfully implemented it. So not sure what your problem is. A lady contacted me that she could not find the code stated in my post and offered to pay me to do it for her. She used a template which didn't have that code, but I managed to find the alternative place to paste the script and got paid.

    You may also want to have a look at Testing Hackosphere Peekaboo expandable post summary.

    Peter Blog*Star
    What a grateful blogger did for me
    (no one should feel obligated. Everything completely voluntary. However, by doing so, you may also help your visitors find helpful information and help. You may even pick up various ways of linking sites there too)

    ReplyDelete
  129. Hi Harry,

    pop-up, another window, same window?

    Sorry, don't understand.

    Peter Blog*Star
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  130. what i want to say is .... when a person clicks on the read more link, it should show the entire post body and also a new window should open which should open another content.

    ReplyDelete
  131. Hi Harry,

    Sorry, still confused. Show whole content. Didn't the hack enable that?

    "a new window should open which should open another content."

    Why would you want another window and what another content? Isn't purpose of clicking on the "read more" show the rest of the content of the post and not some other unrelated content?

    Peter Blog*Star
    The easiest way to earn something for your blogging efforts

    ReplyDelete
  132. Hi, Peter -- This feature has worked very well for me with only one hitch. If I go back to edit a post (using regular compose mode), each "enter" keystroke to create a paragraph results in automatic and multiple insertions of the two code phrases < span class="fullpost" > and < /span > into the HTML document. That, in turn, results into some very strange "blending" of prior posts with the one being edited. I can fix the problem by very carefully editing the HTML to eliminate the automatically inserted code, but that's time consuming! Any advice?
    Thanks
    Old Word Wolf at
    www.oldwordwolf.blogspot.com

    ReplyDelete
  133. Anonymous12/08/2007

    THANK YOU! I spent hours trying to implement the CSS code suggested on Blogger's help site. Yours worked the first time round!

    ReplyDelete
  134. succesfull!! tq very much!! now running at http://top10mp3download.blogspot.com

    ReplyDelete
  135. Thank you SO much. I'm not an idiot, but man, I was having NO luck with Blogger's directions. You solved the whole problem for me. Thank you again.

    ReplyDelete
  136. thank you, thank you, thanks you...I tried all the other "how-to's" on putting expandable posts on my blog, and none worked...I always got error messages when trying to save the template changes. Using your directions, I did it on the first try. Also, the tip on using "Ctrl F" to search the code was a lifesaver...Thanks again, from a blogging newbie.

    http://easymoneysaving.blogspot.com

    ReplyDelete
  137. I have no idea what I would do without your blog. I can cook but have no idea about anything relating to html code or the like. So I used your instructions and was able to create the link. Now my problem has been going back to my previous posts and creating the break. It refuses to work. Any advice would be much appreciated. Thank you!!! You are a lifesaver for all my odd questions!

    ReplyDelete
  138. Hi Ginny,

    Thanks for your kind words.

    Regarding this "break", I suppose that is where you want your incomplete post to end with a "Read more.." or something to click to read the whole post.

    Now the best way to learn something is by example which is what I have given in the scroll box and in it, it is what I actually have in the post editor window for the post. Pay attention in particular to those codes in green because the first one is what you put in your post to make the "break" and the last one one is what you need to put in to complete a pair because almost all HTML tags have to be paired - an opening tag (which is the first one) and a closing tag (which is the last one) normally with a backslash / in it.

    Peter Blog*Star
    Earn with blogs

    ReplyDelete
  139. Thank you! After rereading your post awhile and playing with my posts, I was finally able to make it work. Thanks so much!

    ReplyDelete
  140. Awesome! I have tried three or four times to do this using Blogger's instructions, but it never worked. Following your clear instructions, it worked the first time! Thanks!!! I've made a link to your blog on my page in return. Thanks again!

    ReplyDelete
  141. GREAT tutorial, Peter! I got it first time around on my MacBook.. Yayah!!
    I love your laughing picture;} I have the same laughing smile after doing this;}
    I have now "linked" you for future reference.
    As we say in Japanese..
    Doumo Arigatou Gozaimasu!!
    Jo

    ReplyDelete
  142. Hi Linden,

    Thanks for the kind words and thanks for the link. Much appreciated.

    Peter Blog*Star
    Peter Blog*Star
    Environmentally friendly presents

    ReplyDelete
  143. Hi Jo,

    Your compliments made my smile even broader. Thanks for the link.

    Peter Blog*Star
    Blogger FAQ (Frequently Asked Questions_
    (Blogger FAQ in progress. More will be added as I have the time)

    ReplyDelete
  144. im lost now. i was able to use this steps and it worked but after changing my templates and followed this steps again, it won't work. it keeps giving me this ERROR... i hope somebody can help me with this.

    ReplyDelete
  145. Hi Jona,

    Many bloggers found this post to be very easy to follow and implement, however, note that there will be some templates which would not have some codes I referred to. In fact one lady from Argentina offered to pay me to do it for her. I found that the template she used had exactly that problem, some codes were different from those mentioned in this post and I had to spend time to look for alternative place to put in the codes for the expandable post summary. This may be your problem.

    On the other hand, perhaps it is not. If I am faced with a situation like you, most likely what I will do is ignore error message and try again. If that don't help, then I would use a different web browser and try as many times as I want. I now have Internet Explorer,
    FireFox,
    Opera, Flock social web browser,
    Netscape, Avant, Safari for Windows, xbBrowser, etc.

    Once you have browsers downloaded and installed in your computer, using a different browser is very easy, just a click or two will do.

    Peter Blog*Star
    Generating Revenue from your Website

    ReplyDelete
  146. Thanks for the advise and dropping by my site. But I was able to solve the problem by restarting my computer and tried it again. By the way, here is the site where I am using the Expandable Post Summary: http://jonacreates.blogspot.com .. thanks again and more power!

    ReplyDelete
  147. hi peter, i've done this but my post is now nowhere to be seen. my blog blackground is black and all i see on my blog is black, no posts. any ideas?
    Thanks,
    Erin
    www.erinodwyer.com

    ReplyDelete
  148. XML error message: The element type "div" must be terminated by the matching end-tag "

    why this message out when I make read more

    ReplyDelete
  149. Mr. Chen,
    Your blog is a shining beacon for CSS dummies such as I. I'm wondering if I can make the "Read More" allign to the left instead of to the right.

    Response would be much appreciated!

    Mike

    ReplyDelete
  150. This comment has been removed by the author.

    ReplyDelete
  151. "Maya said...The problem was a huge space between the end of the short post (you referred to this as snatch in your article) and the Read More link. There was like about three paragraphs blank space..."
    Hello Maya,
    Even I, being a newbie, had the same problem and did not know how to go about. I tried what you said and it worked. Thanks a ton.
    Regards
    Venkata Vinay

    ReplyDelete
  152. Hi Erin,

    I had a quick peep at your blog and saw nothing unusual?

    Peter Blog*Star
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  153. Hi Abu Asmah,

    The message says you have somewhere in your template the opening tag <div> without a closing tag </div>

    Peter ChenBlog*Star
    Environmentally friendly presents (gifts)

    ReplyDelete
  154. Hi ::::::::::::,

    Try adding a "text-align:left" attribute somewhere and see if it works. Do let us know of success or failure.

    Peter ChenBlog*Star
    Environmentally friendly presents (gifts)

    ReplyDelete
  155. Mr. Chen,

    That's alright. I don't think it's that important to align it to the left anyways. I'm simply too tired to mess with CSS codes for the time being...

    Thank you for replying to my questions.

    Mike

    ReplyDelete
  156. Hi BudFoxx

    "Is there a way to get the "Continue Reading" link to appear on the same line and right after the post summary part ends so that it is not on the next line?"

    Toughie, afraid I don't fully understand. Anyway if you find ways to do what you want, do keep us updated.

    In the meantime, if I understand what you want, I think the only way is to put a link at the place where the rest of the post is, and link it to wherever you want on the same page like How to enable your blog visitor to jump from one spot to another selected spot in the same page.

    Peter ChenBlog*Star
    How to get free traffic to your blog

    ReplyDelete
  157. Thank you! That was really, really helpful! I didn't manage to create expandable post summaries with Blogger's help, so this was very, very helpful! :)

    ReplyDelete
  158. Hi Peter,

    I have my new simple hack to do this expandable post with a flag indicating the post is truncated and should have the 'read more' link or it is a simple short post that don't need that 'read more' link. Totally with just Blogger Layout Code without any JavaScript. Feel free to check it out on my blog about How to create expandable post summaries in Blogger

    Thank you!

    ReplyDelete
  159. hey peter,
    and OMG!
    it works.
    thanks a million.
    :)

    ReplyDelete
  160. Peter,
    after im done adding the "Click here to read more"... i wanted to put that in the center of my post.. how is that possible?

    or, if u notice, i have this "bookmark" at the end of every post, how can i make that to the center also?

    It's either the "bookmark" or the "For more" to the center.. Can you help me pls?

    Thanks a lot peter.

    ReplyDelete
  161. I know that this hack works, but I'm not sure where to paste it into my code. This is what the post class looks like:

    .post {
    margin:.10px 0 0 0;
    border-bottom:1px dashed $bordercolor;
    padding-bottom:1.5em;
    }
    .post h3 {
    margin:.25em 0 0;
    padding:0 0 4px;
    font-size:140%;
    font-weight:normal;
    line-height:1.4em;
    color:$titlecolor;
    }

    .post h3 a, .post h3 a:visited, .post h3 strong {
    display:block;
    text-decoration:none;
    color:$titlecolor;
    font-weight:normal;
    }

    .post h3 strong, .post h3 a:hover {
    color:$textcolor;
    }

    .post p {
    margin:0 0 .75em;
    line-height:1.6em;
    }

    .post div {
    margin:0 0 .75em;
    line-height:1.6em;
    }

    .post-footer {
    margin: -.25em 0 0;
    color:$sidebarcolor;
    text-transform:uppercase;
    letter-spacing:.1em;
    font: $postfooterfont;
    line-height: 1.4em;
    }

    .comment-link {
    margin-left:.6em;
    }
    .post img {
    padding:4px;
    border:1px solid $bordercolor;
    }
    .post blockquote {
    margin:1em 20px;
    }
    .post blockquote p {
    margin:.75em 0;
    }

    Do you know where I should place the hack?

    Thank you!

    ReplyDelete
  162. Hi Madeline,

    Look for this line of code:
    <div class='post-body'>

    Note that for some templates this may be missing. I have done it for an Argentina lady but I can't remember what was the alternative place and also I was paid to do it for her.

    Peter ChenBlog*Star
    Environmentally friendly presents (gifts)

    ReplyDelete
  163. Oh my gosh!!! This is exactly what I was looking for. I recently switched to Blogger from LiveJournal and have been looking for something to equal LiveJournal's "cut" feature.

    Why isn't there this feature as a standard part of their editor? It seems so basic and it's so useful.

    Anyway, thank you SO MUCH for making this post and for making it dummy proof. :) It helped me that you walked through each step and made it easy.

    AWESOME! :)

    ReplyDelete
  164. Thanks for this. 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?

    Hope you can visit my site to see what I mean.

    http://brainchildunveiled.blogspot.com/

    ReplyDelete
  165. thanks for this post, it was very useful

    ReplyDelete
  166. Great Post! Thanks a lot.
    Instead of "Click Here to Read More", I have written "Click Here To Read the Article Fully in a Seperate Window" and left the short articles unchanged. And as it will be displayed in a seperate page and it will be displayed fully, the sentence is still true even if there is nothing more to read..

    ReplyDelete
  167. Thanks! This is much appreciated.

    ReplyDelete
  168. Iv had ppl helped me with the 'read more' but it didn work. Iv also searched on the internet but failed until I used the one that you wrote.

    Just want to thank you for the wonderful and easy-to-follow instruction. Im very html blind so you're really good!

    Farina

    ReplyDelete
  169. Thanks ! I tried various hacks, yours was the only one that worked.

    ReplyDelete
  170. peter plz hepl the read more link displays at the end of posts????

    ReplyDelete
  171. Fo alok,

    This post is as clear as I can make it and I can only suggest you read it again. If not, try the jQuery expandable post summary which once installed in the template, don't require you to do anything else.

    ReplyDelete
  172. I have been struggling with this feature for hours using Blogger's instructions. I've switched over to your code and it is "almost" working. As the page loads the post is truncated. However, just as the page finishes loading the full post comes up. Any thoughts. My blog address is LouLusOnline.blogspot.com

    ReplyDelete
  173. Hi Nice blog....

    I was looking for the solution for 'read more..'

    Thanks for such informatative blog.

    Regards
    http://www.xtrashots.com

    ReplyDelete
  174. If you don't mind doing a little extra work on your posts, there's a way to add "Read more" only on the posts you want. Just paste this after head tag:

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

    Then use this for your post template:

    (your text here)
    <span class="shortpost"><a href="">Continue reading…</a></span>
    <span class="fullpost">
    (your text here)
    </span>

    Now after you post, open your blog on another window, copy the permalink of your post, and re-edit the post to add the adress in the a href="" tag.
    For short posts, just clear your entire post template before you write.

    ReplyDelete
  175. All this may well be ok, but it is very complicated.
    Why doesn`t Blogger simply add a "Read more..." tag/button on the Edit page?
    It will help millions.Think about it.

    ReplyDelete
  176. I also struggled a heck of a lot with this, newbie errors I suspect, where after all the messing there is obsolete code all over the place. There were div's and span's everywhere! So what I did, and yes, I'm pretty sure this is the kind of messy coding that geeks lose sleep over is:

    Made sure that I didn't have a span right after the span class="fullpost" line (didn't know what it was for but I was desperate), instead I took it out and threw it at the very end of the coding.

    I know I don't know enough to make this a very useful comment, but maybe that other soul who was struggling might find it works.

    What I also found was after I had seen it working I went back into the non-html mode to add a space and that was a mistake as it added in the span tags again, so there are my learnings. Hopefully the next new post will be a lot cleaner and easily. Thanks very much for the code for this, much appreciated!

    P.S. I agree with the lady who says it would be a FANTASTIC feature to add for us non-programmers, a intro body field and then a whole article field.

    P.P.S. In my code the body line where you add the hack under it isn't just post-body, it's longer and the other bit (rest of it HAS to stay in)

    P.P.P.S. Shame for you for telling that one person to go and look up basic html codes because she used brackets here when trying to explain when you CAN'T use those tags in here or it isn't posted!

    ;->

    Thanks again

    ReplyDelete
  177. Thank you so much! I have been struggling with this for what seems forever... until I stumbled on your site. Keep up the great work!

    ReplyDelete
  178. Thank you for teaching programming to non-programmers.

    ReplyDelete
  179. hi!!!

    just wanna thank you for sharing this hack! i was using jquery before and its just frustrating how long it takes before my page loads... hehehe...

    now because of your hack, its loading half the time. thanks again.

    the earning student

    ReplyDelete
  180. Great information. I however am having a similar issue to some above. The Click Here To Read More, is at the bottom of the post.
    This is when I am trying to edit old posts.

    Template is TicTac

    My template code snippet is exactly as yours except:

    YOURS:

    div class='post-body'

    MINE:

    div class='post-body entry-content

    I edited the blog post code and added

    span class="fullpost" about 100 words into the post. At the end I added /span, < left out to post.

    However the click link is at the bottom, and the blog is not being truncated.

    A few things to confirm, widgets had been expanded,

    Thoughts?

    ReplyDelete
  181. The hack doesn't work for certain templates. I am using a three column one and when I open the code in Dreamweaver and search for (Ctrl + F):

    div class='post-body' (without the tags <> as I can't use them when I try to post my comment).

    It says: Not found in the current document. Sigh...

    ReplyDelete
  182. A year back, someone from Argentina emailed me when she couldn't implement this expandable post summary. She offered to pay me to do it for her. When I checked her template, it also didn't have that <div class='post-body'> (want to know how I displayed that < and >?) and I had to search for an alternative place and managed to complete it for her.

    ReplyDelete
  183. Hi, I have been using this expandable post code for some time and it works fine, but I have the same small complaint as Maya, I have a large gap between the end of the summary and the "keep reading" link (in my case). I only type my blog post using the html view, and only add one opening span id="fullpost" and one closing span. However when I publish the post blogger seems to add the same span id to each paragraph in the fullpost section. If I implement Maya's fix it means I have to manually edit every post, but I am not even sure what is causing this problem. If I look at the source code for the blog page itself there is an extra break tag between the summary paragraph and the rest. It looks awful. I have set the convert line breaks option to NO in the formatting options but it makes no difference. Any ideas?

    ReplyDelete
  184. Thanks a lot for explaining the hack in easy manner.It worked like a charm.

    ReplyDelete
  185. This code works well for me so thanks! But i realised that i can't really add any more words after the codes as those additional words will appear before the "read more", once you click the read more, it will appear normal as i wanted it.

    This is wat i want ie:
    Summary
    (code)
    Blah blah blah
    (/code)
    Additional blah blah....

    But it will appear as (before clicking "read more"):
    Summary
    Additional blah blah...
    (code)
    Blah blah blah
    (/code)

    So basically instead of the full post i only want to hide partial post, is there any way to go around that? Thanks in advance!

    ReplyDelete
  186. no matter what i do it wont work for my page

    ReplyDelete
  187. it doesnt work for me :(

    http://fru1tcak3.blogspot.com/

    ReplyDelete
  188. Thank you very much, that was the easiest way!

    ReplyDelete
  189. So much easier than other hacks I tried... and this one actually WORKED!
    THANK YOU!

    ReplyDelete
  190. Hello,

    I have tried a few different versions of this 'expandable post summary' approach, but all seem to have one problem. They don't work if the contents within the 'span' elements have list elements like (ul or ol). It works for posts that don't have lists.

    Have you seen this problem? Is there any way to fix it?

    Thanks.

    ReplyDelete
  191. I have only tested expandable post summary for demo blogs and never use it regularly so I don't know about the effect of list elements. But why don't you try jQuery expandable post summary

    ReplyDelete
  192. Peter, your instructions rock! By far the most clear (and effective) that I was able to find anywhere. :) Thanks! I have two suggestions to make your instructions even more clear--

    (1) I just signed up to blogger, so presumably, I am using the newest template they've got. Like Peter MacSweeny pointed out in his previous comment, my template doesn't have the line:

    div class='post-body'In the html,

    Instead, I have this line:

    div class='post-body entry-content.

    I pasted your hack (exactly as is) after this line, and it still worked perfectly. You might want to mention this variation in the template code in your instructions, so that other newbies like me can use it with confidence. :)

    (2) You might want to indicate for newbies where to find the "Post Template." It took me a few minutes to locate. In my version, you go to "Settings," and then "Formatting." The "Post Template" box is at the bottom of the page.

    Thanks again!

    ReplyDelete
  193. Hi Kid Novice,

    Thanks a million for the feedback and the suggestion which will definitely improve the post.

    ReplyDelete
  194. THANK YOU THANK YOU THANK YOU!!!!

    ReplyDelete
  195. Here's another big Thank You. This isn't the first time I've come to you, and you never let me down. Thanks for the clear instructions!.

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics