Automatic Post Summary with Thumbnail (Read More) (Blogger)

Tutorial:

1) Go To Layout> Edit Html> Backup your Template (Download Full Template)

Now the editing Begin:
2) Find this code

</head>

3) Replace the above code with this long code

<script type='text/javascript'>
var thumbnail_mode = &quot;float&quot; ;
summary_noimg = 230;
summary_img = 140;
img_thumb_height = 100;
img_thumb_width = 100;
</script>
<script src='http://blogergadgets.googlecode.com/files/excerpt.js' type='text/javascript'/>
</head>

4) Then please look for this code

<data:post.body/>

5) Overwrite the above code with the code below

<b:if cond='data:blog.pageType == &quot;item&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 style='padding-top:5px;;float:right;text-align:right;'><a expr:href='data:post.url' rel='bookmark'><b>Read more >></b></a></span>
</b:if>

6) Preview> (if all the thing works fine then you can proceed) Save Template.

Note:
Using your own creativity, you can edit all those blue text, the text summary characters long 230 to anything longer/shorter, image width and height of 100 to 80, 70, or 120 or any size you want. Then, http://blogergadgets.googlecode.com/files/excerpt.js is your main javascript (without this script, your hack will 100% fail), you can open up the java, download it and host it into your own secure hosting directory. Finally, you can change that the above Read more >> to any other text you like (eg: more, read further, full text, etc).

Sponsor:
1- Blogging books, copywriting paperbacks and more