How to add a read more button to blogger posts - part 2

In the first part of this tutorial I had explained how to add a the button after every post. Now I will show you how to show only a selected amount of text as a teaser from your posts. With this method you will need to select the amount of text to show for each post separately. If you Google for it you will found some automated methods but these are not working well, so it`s better to select the amount of text on your own, because you can select the most interesting part of your posts.

The concept of the code is very simple. The content of the post is placed in a div ,but without the select part of the text. The display of that div is set to hidden, so on the main page of the blog is visible just that part of the post what is not in that div. The full post is visible only on the post page. Here is the code:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#full-post{display:inline;}</style>
<b:else/>
<style>#full-post{display:none;}</style></b:if>

I have used full-post as the name of that div. Place the code right after the <data:post.body/> line.

Save your template and now edit your posts in the following way:

This is the first part of the post , the teaser (the part of text showing up on the main page of the blog) <div id="full-post"> This is the rest of the post. This part of the post is visible only on the page of the post. </div>

The red marked code snippets are the starting and the ending tags of the div called full-post. Place these tags in each of your posts in the same way as in my example.

NOTE: Don`t forget to close the div tag! If you don`t understand something just ask!

Related tutorials: