SIMBE Blog

How to create expandable post summaries in Blogger

Expandable Post Summaries is the method by which each blog post consists of a short paragraph of introduction followed by a “Read More” link. It will be useful if the writer have a long posts and don’t want the visitor to scroll through long line of text to see the next post in their main page.

If you’r blogging on wordpress it’ll be more easy to use expandable post summaries. Because wordpress has already provide tools for us to use expandable post, we just need to click “Insert More Tag” or click “Alt+Shift+T” on the toolbar.

But if you’r blogging on blogger, there wont be so easy to use expandable post summaries. Many bloggers have reported confusion when they tried to follow the instructions on the official blogger help page. Actually there are basically only need to do three steps to implement expandable post summaries in the new layouts template.

1st step : Create a conditional CSS
The first step is to put the code for the conditional css, but before that it is better that backup your template first. After that on the Dashboard, click on “Layout” menu and choose “Edit HTML“. Then scroll down till you come to </head> tag and add the following code immediately above it :

<style>
<b:if cond=’data:blog.pageType == “item”‘>
span.fullpost {display:inline;}
<b:else/>
span.fullpost {display:none;}
</b:if>
</style>

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

2nd step: Add “Read More !” link on your post
In this step, we need to add the “Read More !” links which will appear after the paragraph summaries. Before that you must put a check in the Expand Widgets Template checkbox at the top of the Edit Template text box. Then scroll down in the code till you come to <data:post.body/> tag, add the code below immediately after the above code :

<b:if cond=’data:blog.pageType != “item”‘>
<a expr:href=’data:post.url’ target=’_blank’>Read more!</a>
</b:if>

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

last step: Add span tag on your post
You need to modify your post template so that each post when created will show you where to place your summary paragraph and where to place the rest of the post. Choose “Edit HTML” option on Post Template, copy and paste the following lines there :

Paragraph Summary of the post. <span class=”fullpost”>And here is the rest of it.</span>

Replace the line “Paragraph Summary of the post.” with your summary paragraph. Then replace the line “And here is the rest of it.” with the rest of your post. Do not delete the span tag!

After i tried on my blogger, i notice there’s advantage and also disadvantage using this method.

• The advantages of this method is you get a link to your posts below your summary paragraph which gets an additional link in the search engines indexing. Also you do not have to rely on any external Javascript. The third advantage is that the Read More ! link opens into a new page leaving your main page still open in viewer’s browser.
• The disadvantage is all of your post will have Read More ! link, whether you want to use it or not it’ll always appear on your last paragraph of post.

Well hope it’ll be useful to you, happy trying

Bookmark It