Automatic Thumbnail and Read More Function for Blogger

Including read more feature below posts gives professional look to your blog. As you can easily include read more in blogger by inserting jump break, but you would have to manually add it every time whenever you publish any post. So better is to make settings for auto read more option as it saves your time and also prevents from being confused about where to insert it at proper position in body content. Follow these simple steps:

1. Login to Blogger.
2. Go to Design> Edit HTML.
3. Backup your template.
4. Check the Expand Widget Templates.
5. Find this code

<data:post.body/>

Replace with this code below

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<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>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

6. Now, search for </head> and paste the following section of code immediately before it:

<script type='text/javascript'>
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 100;
img_thumb_width = 120;
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}

function createSummaryAndThumb(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = summary_noimg;
if(img.length>=1) {
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
summ = summary_img;
}

var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

Clarification code above:
summary_noimg = 430: is post cut height without image
summary_img = 340: is post cut height with image
img_thumb_height = 100: is thumbnail image height
img_thumb_width = 120: is thumbnail image width