"Read more.." Expandable Posts Feature for Blogger

Having expandable posts in blogs are better for 2 reasons: you can display more posts at a time and your visitors will do at least one more click if they're interested in article.

If you've read How can I create expandable post summaries? in official blogger help you might have run into problems because there is some confuse in the article. I will show you step by step how to create expandable posts feature on the blogger template.

At first make sure that you have enabled post pages feature (by default it is)

Then go to Template-> Edit HTML and put a tick on expand Widget Templates Option

Locate in the template lines </b:skin> and </head> and between them insert this chunk of code:

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

This piece of code is a conditional statement. It checks the post whether it's marked with span tag and fullpost class. If it's so then short version is displayed (the beginning of post with "read more" link).

After that in the middle of template locate post-body and post-footer divs and between them insert this code:

<b:if cond='data:blog.pageType != "item"'> <a expr:href='data:post.url'>Read more...</a> </b:if>

Be sure that you insert code between div tags, that is after </div> and before <div.. See screenshot. Use Ctrl+F to quickly find right location of code in template.

This code puts Read more link if your article is displayed in main blog page with other posts.

Now you have constructed your blog to be ready to display expandable posts with read more link. What you have to do now is to manually insert span tag with fullpost class defined. For example this html code in your post:

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

will render as this: Here is the beginning of my post. Read more! And when you click Read more link whole thing appears: Here is the beginning of my post. And here is the rest of it. Tips4Weblife works!

To say this even simpler, when you wrote whole post go to html view and in the beginning paste this code <span class="fullpost"> then go to the sentence where you think it should end and paste this code </span>. That's it.

Final notice: the introductory part of your post should contain pure text. This means you cannot halve your list in the middle with span tag because it will damage post's html code. And you're not limited to span tag. You can succesfully use div tag with a class "fullpost" in side it.

Made in reference via vis and blogger help