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">As you can likely tell, these styles are designed to alternate the "fullpost" and "summary" layers. You can tweak the margins to your liking.
<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>
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
No comments:
Post a Comment