Skill Level: Easy, Skills Required: CSS, HTML
Often times on archive pages you do not want to display entire posts. You want to have a list of posts that the reader can easily scroll through to find what they are looking for. One option is to just display the title of each post, but if you are like me and don't always come up with descriptive titles a better option might be to the display the title and a preview of the post with a "read more" link.
Step 1: Set up your posts to have 2 parts…the first is the preview section and will always be displayed, and the second will be the full text section that will not be displayed on an archives page. In each of your posts, click the button to Edit HTML. Then, put <span class="fulltext"> at the point you want the preview section to end and the fulltext section to begin. Then at the end of your post put </span>. This can be a rather lengthy process to manually enter all these span tags, especially if your blog is already established with lots of posts, however, on some of your shorter posts you probably don't even need to specify a fulltext section as it will be okay if the entire post shows on an archive page.
Step 2: Add a "read more" link to the end of every post. In step 3 we will hide this link when not on an archives page. Go into your Layout: Edit HTML page and click the checkbox to Expand Widget Templates. Find the post body and add <span class='read-more'><a expr:href='data:post.url'>[...]</a></span> right after . This will add a […] to the end of every post that the reader can click on to view the entire post.
Step3: Use CSS and blogger server side code to set up some conditional formatting. We want to display the read more link, but not the fulltext section or the post footer when on an archive page. Conditional formatting must be inside a <style> </style> tag. Some templates don't have these so you may have to add one to the end of the <head> section. Code the following:
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:if cond='data:blog.pageType != "item"'>
.fulltext {display: none;}
.read-more {display: inline;}
.post-footer {display: none;}
<b:else/>
.fulltext {display: inline;}
.read-more {display: none;}
.post-footer {display: block;}
</b:if>
<b:else/>
.fulltext {display: inline;}
.read-more {display: none;}
.post-footer {display: block;}
</b:if>
