Read More (Excerpts) on Blogger's Home Page

This article will explain how to add a "Read More" link to your Blogger (blogspot.com) posts so that only a portion of a post's text will appear on the blog's front page, like a teaser. Then users who want to read the rest of the post have to click a link to see the full text. This is more or less like the excerpt option for Wordpress blogs or also known as expandable post summaries.

This is handy if you have lots of long articles all on one page. To do so, go to your Blogger Dashboard: Layout > Edit HTML and check "Expand Widget Templates", then

(for classic templates)
Search for this in your template: <$BlogItemBody$> and right after it, paste this:

<div class='more-link'>
<MainOrArchivePage><br />
   <a href="<$BlogItemPermalinkURL$>">Read more!</a>
</MainOrArchivePage>
</div>

(for layouts - new Blogger Templates)

Search for this in your template: <p><data:post.body/></p> and right after it, paste this:

<div class='more-link'>
<b:if cond='data:blog.pageType != "item"'><br />
   <a expr:href='data:post.url' expr:title='data:post.title' rel='nofollow'>Read more!</a>
</b:if>
</div>

Once more, search for </head> in your template, and before it, add this:

(for classic templates)

<style>
<MainOrArchivePage> 
   span.fullpost {display:none;}
</MainOrArchivePage>

<ItemPage> 
   span.fullpost {display:inline;} 
</ItemPage>
</style>

(for layouts - new Blogger Templates)

<style>
<b:if cond='data:blog.pageType == "item"'> 
   span.fullpost {display:inline;}
<b:else/>
   span.fullpost {display:none;} 
</b:if>
</style>

Then, when you publish a post, add the text you do not wish to show up on your front page (and on labels pages and searches too) between these tags:

<span class="fullpost"></span>

Like so:

This is a post. This text will show up on the main page
<span class="fullpost">This is still part of that post, but this text will only show up after clicking the "read more" link or the post title.
</span>

This tags can go into your post template so that you don't have to remember/type it each time. To do that, go to your Blogger Dashboard: Settings > Formatting and put this in the Post Template box:

Here is the beginning of my post. <span class="fullpost">And here is the rest of it.</span>

Then, when writing a new post, that text will show up by default and all you have to do is replace the first part (outside the tags) with what you want to show up on the main page (the excerpt or teaser, call it whatever you want) and the part between the tags with the rest of the post (article).

And you're done. But if you also want to customize it, here's how to do it. Go to your Blogger Dashboard, to Layout > Edit HTML and search for ]]> and above it, paste this:

.more-link {
display : block;
background : url(http://i142.photobucket.com/albums/r99/nilarimogard/arrow_right.png) no-repeat right top;
padding-right : 20px;
text-align : right;
clear : both;
}
.more-link a {
text-decoration : underline;
font-weight : bold;
}
.more-link a:hover {
color : #ff0000;
font-weight : bold;
text-decoration : underline;
}

You can of course customize it further, this is just how it looks on my blog. You can for instance download my red arrow from the above code, change it's color and upload it somewhere and then use it in that code, change the font color and so on.

Update: how to add selective "read more", meaning that the "read more" link will only show up on the posts you want too, not all.