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 hereUpdate 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 NovicePlease 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 templateBackup New Blogger template PLUS Page Elements and edit templateThe 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 firstNext, 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 AdvertisingUpdate 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 summaryUpdate 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 enginesAcknowledgement: 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.
