Tech Tip: Adding teasers to Blogger

One of the drawbacks I have noticed in most of Blogger's templates is a lack of short teasers for display on the home page. After a bit of research I uncovered a method to address this. Many blogs have an index page for their home page that displays a list of articles with a short description - or teaser - about the article.  The free Blogger templates I have used do not seem to incorporate this feature, so I investigated ways of adding the capability to my blog.
First, I would caution anyone undertaking this - have a good comfort with HTML, CSS, and at least one programming language {javaScript, PHP, ect.} before beginning.  Also, be prepared to have your blog display only a # as you work through the solution.

Before I begin, there is a bit of background to cover.  Blogger uses templates to determine what content is displayed and how it is arranged. The template has a number of "layout data tags" that can be used to determine what to display and when to display it. A complete listing of these tags can be found at Google>Help>Customize Your Blog>Layouts. Additionally, it is usefull to understand the logic constructs of Blogger's templating language. For this tech tip, I will be using the IF construct which is composed of three tags:

• <b:if cond='condition goes here'>
• <b:else>
• </b:if>

I will also leverage the blog.pageType data tag.  It typically has one of three values: item - it is the full blog post; index - it is on the index, or home page; archive - it has been moved into the archives.  When the blog.pageType is item, we want to display the full post. When it is index, we only want to display the teaser.  I will also be working with the post.body data tag which holds the contents of each post and the post.url data tag which houses the address of the full blog post.

To differentiate between teasers and the full post, I use two different CSS classes - teaser, fullpost.  I will place the text in my posts into the appropriate <span> so that the HTML of my posts looks like this:

<div class="teaser>
{Teaser text goes in here}
</div>
<div class="fullpost">
{Full post text goes in here}
</div>

One more item before we begin.  I would recommend that anyone attempting to edit their Blogger template utilize a good line editor.  I prefer using the shareware editor notepad++ which can be downloaded from http://notepad-plus-plus.org/.  However any good line editor will do.  I would caution against using the default Windows Notepad or a full word processor such as Microsoft Word.

Now let's begin.  The first step is to acquire the template HTML.  To do this, open your blogger account and select Template from the left menu.  Click on the Edit HTML button to open a window containing the template.  Once open, click on the Expand Widgets Template checkbox. Now click anywhere in the HTML code and press {Ctrl+A} to select all the text and {Ctrl+X} to cut it to the clipboard.  Paste this into your line editor.

Inside the editor, find the <data:post.body/> data tag and replace it with:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
      <style>.teaser{display:none;}</style>
      <style>.fullpost{display:inline;}</style>
      <p><data:post.body/></p>
<b:else/>
     <style>.fullpost{display:none;}</style>
     <style>.teaser{display:inline;}</style>
     <data:post.body/>
     <b:if cond='data:blog.pageType != &quot;item&quot;'><br/>
          <a expr:href='data:post.url'>Read more...</a>
     </b:if>
</b:if>

This will turn on teasers on the index page, then turn them off on the actual post pages. You then select all from my line editor {Ctrl + A}, copy it to the clipboard {Ctrl + C} and paste it back into my Blogger template window {Crtl +V} and click on Save template. 

Next, choose Settings > Post and comments > Post Template and add the following to the Post Template:

<div class="teaser">
{teaser text goes here<br /><br />}
</div>

<div class="fullpost">
{post text goes here<br /><br />}
</div>

These same <div> tags can be inserted into existing posts to incorporate teasers.  Just edit each post, and turn on HTML.  Add <div class="fullpost"> to the top of the post and </div> to the bottom.  Then insert <div class="teaser"> </div> at the very top and type the teaser between the div tags.

Depending on your template, there may be a number of items displayed below the Read more... link.  I suggest working through each item below the <data:post.body> data tag, commenting them out {<!--   -->} and seeing the result on the index page of your blogger site.  Once you have it the way you like it, replace each comment pair with <b:if cond='data:blog.pageType == &quot;item&quot;'> and </b:if>

That's it.  Save the final template and your site will now have teasers on the index page.