How to create Automatic Jump breaks on home page with post summery and image thumbnail

Adding Automatic Jump breaks to blogger template is very easy than adding Jump breaks to each post manually. I found a little script than can grab a little summery of your post and a predefined size thumbnail to create smaller posts with read more button. Most new blogger templates already have installed this script or some thing like this. But if you are customizing a basic blogger template, you will need this script to do that. 

This is very simple. First open your blog and Go to Template and Click on Edit html button as shown in this image. Click on proceed on next window. 
Now click on "Expand widget templates" check box and search for </Head> Read How to search Specific code in Blogger template. Now paste the following code Before / Above </Head> tag


<script type='text/javascript'>
var thumbnail_mode = "no-float" ; 

summary_noimg = 575;

summary_img =475;

img_thumb_height = 200;

img_thumb_width = 200;

</script>
<script type='text/javascript' src='http://bloggerblogwidgets.googlecode.com/files/auto_readmore_blogger.js' > </script>



You can change those blue color values as you like. First one is the length of the text summery if you don't have an image on your post. second number is the text length if you have an image on your post to use as a thumbnail on the home page with your summery. Third and fourth numbers are the width and height if the thumbnail you are going to show in your home page with your text summery. IF you have larger or smaller images than this size you given the code those images will be changed to this size when creating thumbnails. 



Now find <data:post.body/> on your code and replace it using the following code


<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<div style='clear: both;'/>
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url' >Read more ... </a></span>
</b:if> </b:if>

You can change the Blue color text as you wish. you can add "Continue reading" or "More details" it will be shown as your Jump break text.  Now save your template and go to home page to see how your script working. change summery length and image size as you want.