Making expandable posts in Blogger

Blogger lacks a few interesting features. One of them is the creation of expandable posts.
An expandable post is a blog post with an intro that tries to get the attention of the reader, and where the rest of the post can be read by clicking on a 'read more' button.
If you search for the creation of expandable posts in the Blogger Help, a possible solution is suggested. However, the solution that is being suggested will create a 'read more' button for all your posts, not only the ones that really do have more text to read. And what good is having a button that says 'read more' in a post where there is nothing more to read.
But there is a way to create expandable posts in Blogger, that lets you decide if a 'read more' button should be shown or not.
All you need to do is copy and paste some code into your blog template.

The first thing you should do, is make sure that the 'enable post pages' in the archiving settings of your blog is set to 'yes'.

The following code lines should be placed in your Blogger template, between the <style> and </style> tags:

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

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

The following code should be placed in your Blogger template, between the </style> and </head> tags:

<script type="text/javascript">
var memory = 0;
var number = 0;
</script>

Copy the following code directly after the Blogger template tag <$BlogItemBody$>:

<MainOrArchivePage>
<script type="text/javascript">
spans = document.getElementsByTagName('span');
number = 0;
for(i=0; i < spans.length; i++){
var c = " " + spans[i].className + " ";
if (c.indexOf("fullpost") != -1) {
number++;
}
}
if(number != memory){
document.write('<a class="readmorebutton" href="<$BlogItemPermalinkUrl$>"> Read more...</a><br>');
}
memory = number;
</script>
</MainOrArchivePage>

The next code should be placed directly after the <style type="text/css"> tag in your template:

a.readmorebutton:link, a.readmorebutton:visited {
float: left;
margin: 2px 2px 2px 2px;
padding: 2px;
width: 115px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #000000;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #000000;
background: #CCCCCC;
text-align: center;
text-decoration: none;
font: normal 10px trebuchet ms, verdana, sans-serif;
color: #194B77;
}

a.readmorebutton:hover, a.readmorebutton:active {
float: left;
margin: 2px 2px 2px 2px;
padding: 2px;
width: 115px;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #000000;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #000000;
background: #EEEEEE;
text-align: center;
text-decoration: none;
font: normal 10px trebuchet ms, verdana, sans-serif;
color: #194B77;
}

That's it!
Now every time you want to write an expandable post, you write the post like this, including the two tags:

This is the post entry.
<span class="fullpost">Here is the rest of the post that people can read after clicking the 'read more' button.</span>

Tags: Blog Blogger Blogging Expandable Post Read More