Saturday, July 4, 2009

Blogger Template modification for "Read More..."

Some templates for Blogger do not have "Read More..." feature by default, but it is not very difficult to add it the way you like. The idea is to display post differently when it is in the home page or in any of other multi-post pages as a page of selection by a tag, for example, and when it is the page of the post itself. That condition can be checked directly with the page attribute data:blog.pageType: it is equal to "item" when the page shows the post itself.
  1. Backup the original template for the case: Blogger Layout/Edit HTML tap, Download Full Template;

  2. In the Blogger Layout/HTML tap make "Expand Widget Templates" checked;

  3. Find the structure showing a post, it looks like this:
    <div class='post-header-line-1'/>

    <div class='post-body'>
    <p><data:post.body/></p>
    <div style='clear: both;'/>
    </div>

    The line responsible for showing a post is <p><data:post.body/></p>

  4. The original unconditional structure should be replaced with the following one:
    <div class='post-header-line-1'/>

    <b:if cond='data:blog.pageType == "item"'>
    <style>.prepost{display:none;}</style>
    <style>.fullpost{display:inline;}</style>
    <div class='post-body'>
    <data:post.body/>
    <div style='clear: both;'/>
    </div>
    <b:else/>
    <style>.prepost{display:inline;}</style>
    <style>.fullpost{display:none;}</style>
    <div class='post-body'>
    <data:post.body/>
    <a expr:href='data:post.url'> Read more...</a>
    <div style='clear: both;'/>
    </div><br/>
    </b:if>

    This is pretty much the same as it is suggested in the Blogger Help on "How can I create expandable post summaries?" The difference is that I wanted to have three sections in a post instead of only two, so I added a "prepost" section which would be showed only in the pages with post lists, and not on the post page.

  5. In Setting/Formatting tag modify "Post Template" to:

    This part will appear unconditionally.
    <span class="prepost">This part will appear only in the list of posts.</span>
    <span class="fullpost">This part will appear only in the post itself.</span>

    The "prepost" section is useful in cases when post appearance in the list should be different to the "fullpost" section as it is done, for example, for "Big Green Egg BBQ Ribs - the path to success".

  6. Do not forget to save all the changes!

0 comments:

Post a Comment