Create expandable teaser summary for your blog

Expandable Post Summaries is when each blog post consists of a short paragraph of introduction followed by a 'Read More' link. This enables the reader to get a small introduction to each post on the main page. You get to show more posts in one page and your readers are spoiled for choices to read!

It is very simple actually, i will teach you step by step on how you can setup your expandable post summaries. "Read More!" There are basically three steps to follow if you want to implement expandable post summaries in the new layouts template.

Styling your CSS
The First step is to style it into your CSS and this changes how posts display on different pages.

• Login to your account
• Go to 'Template'
• Go to 'Edit HTML'

Scroll down just above </head> and add in this code:

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

Note that there is a ]]></b:skin> tag just above the </head> tag. Add the above code so that it lies between these two tags. What we did here was to define a class
called "fullpost".

Read More Entry>>
The second step is to add the Read More links which will appear after the paragraph summaries.

• Under 'Edit HTML', look on your top right and under 'Expand Widget Template' put a tick to open up more of your XML.
• Scroll down the code and look for this code <data:post.body/>

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 Entry>></a>
</b:if>

Upon completing the code,save the template and ensure you have a backup copy of this previous template. You should see that the Read More Entry>> appearing on your blog.

Increasing your Font Size and Font Weight
Font Size
start with
<span style='font-size:120%;'>

End with
</span>

Font Weight
start with
<span style='font-weight:bold;'>

End with
</span>

Using Both is another optional you can consider.

The Last Part to a Teaser look
To create the Final teaser look like and to allow users to read the full article with a click on Read more Entry, you got to hide your other half of the article post.

• Type your Teaser paragraph
• Leave this code on the next line to hide the rest of your post.
  
• <span class="fullpost"> and </span>(In between this code will be the rest of your article content

Of course you can always void this blog trick if you want to present your post in full! Do you have a blog trick you want to share? Share it with me and i will share it will the rest here!

Random Post
The Nine Habits of Highly Effective Bloggers
Learn to fail to be successful in making money online
10 Popular Firefox Addons for Better Blogging
7 tips to write a professional and effective article
Easy Steps to add Favicon for Bloggers