Create auto expandable posts (or auto readmore) in blogger with image thumbnails

If we go back to the method of creating auto expandable posts it has really changed a lot.First we have to use <span class="fullpost"> tags in each posts for creating expandable posts.This method was really boring and contains lots of drawbacks.Therefore there should be new easy method for creating expandable posts and then new method is here.

This new method of creating auto readmore helps you to create all of your posts expandable from the first post of your blog.It also shows the thumbnail of the post in the front page.You dont have to use any tags for it.You just have to add some codes to your blog and the work is done.If you want to create these types of expandable posts the follow the simple steps below.

Before you perform any hack remember to backup your template so that you might restore your previous template in future.For this click download full template in your blogger Edit HTML page.

First of all search for the following code in your blog Edit HTML page.

<data:post.body>

Now in the second step replace the above code with the following block of codes.

<b:if cond='data:blog.pageType != "item"'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");</script>
<span class='rmlink' style='float:right'><a expr:href='data:post.url'>Read more>></a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

Now in the last step paste the following block of code just above </head> in your blog.

<script type='text/javascript'>
summary_noimg = 450;
summary_img =350;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://deineshd.110mb.com/read-more_auto.js' type='text/javascript'/>
 

Now Save your Template to see the result.