More On "Read More" Blogger Articles

In the last article I showed how to create the type of post display I use here at diagrammes modernes. Only the first part of an article appears on the main page, with the entire article following once the reader clicks on "more".

This is easy to accomplish and enhances the readability of the site. But it requires that articles are written so that the first part of each stands on its own. What if you want the summary to be different from the article proper? Well, that too is easily done and I'm here to show you how.

1. Modify style

Edit your template as before in order to put the following style code in the HTML header. If you have already made the changes in the previous exercise there are only two new lines here.

<style type="text/css">
<MainOrArchivePage> 
.fullpost {display:none; margin-top:0em;}
.summary {display:inline; margin-top:2em;}
</MainOrArchivePage>

<ItemPage> 
.fullpost {display:inline; margin-top:2em;} 
.summary {display:none; margin-top:0em;} 
</ItemPage>
</style>

As you can likely tell, these styles are designed to alternate the "fullpost" and "summary" layers. You can tweak the margins to your liking.

2. Modify post formatting

In this case the code at the end of the <div class="post"> layer can be the same as before, or possibly modified to be more explicit.

<MainOrArchivePage>
<div class="more">
<a href="<$BlogItemPermalinkURL$>" 
  title="read article">more</a>
</div>
</MainOrArchivePage>

This allows you to style the "more" class as you wish.

3. Create a post template

In your blog "Settings" tab on the "Formatting" page, enter the following "Post Template":

<div class="summary"></div>
<div class="fullpost"></div>

Authoring a post.

Each time you start a new article you will need to write a summary in the first div and the full article in the second. It's as simple as that.

I do hope this technique will prove useful!

RELATED POSTS