How to "Continue reading here..."

For the past few weeks, I've been looking for a tweak on Blogger to put a "Continue Reading here" on the main page and archive page, forcing the reader to go to the permalink pages where your advertisement are more relevant. I can't find a decent tutorial on the net, but I did find some Blogger blogs with such kind of functionality. What I did was to study their techniques (by reading the source code! hehehe) until I finally figured out how they did it.

Now, I am going to share it with you. ;) There are 4 steps to follow in editing the template and 1 step when posting. But before you do anything, back up your original template, ok?

Template changes.

1. Copy and paste this code on the CSS declarations. That is between the <style></style> tags.

<style>

....
...

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

</style>

2. Copy and paste this code just after the style closing tag (</style>):

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

3. Copy and paste this code just after the <$BlogItemBody$> 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('<br /><a href="<$BlogItemPermalinkUrl$>" title="permanent link">Continue reading "<$BlogItemTitle$>" here...</a>');
}
memory = number;
</script>
</MainOrArchivePage>

4. Republish your blog.

Now, after republishing your blog, it is now set for Continue Reading Here kind of post. All you have to do now is to edit your post to mark which part of your post to be hidden. Here is how to do it.

Open a blog post in Edit HTML mode. To mark the part that you want to hide, simply put those part between <span class="fullpost"> </span> tags.

Example:

Example Post

This is an example post. This one is displayed on the main and archive page. <span class="fullpost">This part of the post is hidden and can be viewed only on the permalink page.</span>

This is how the post will look like on the main or archive page:

Example Post

This is an example post. This one is displayed on the main and archive page.

Continue reading "Example Post" here...

The permalink page will contain the full post. For comments and suggestions, don't hesitate to contact me ;)

That's all!