Auto Read More/Continie Reading Hack With Thumbnail For Blogger ~ Bachelor Zone

you know how to add add read more link using "Insert jump break" by blogger. How about a simple hack that will do this automatically for us. Also it will improve the look of our blog. You will never have to click on "Insert jump break"again and again. You have to just add two codes in your template.

Live Demo of this hack is available.

Installation of this hack
Step 1
Go to Dashboard >> Design >> Edit HTML >> Download Template (for back up) >> Click on Expand Widget Templates and look for </head>

Now add following code ABOVE </head>

<script type='text/javascript'>var thumbnail_mode = "no-float" ;
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>

Step 2

Now look for <data:post.body/>

Add following code ABOVE <data:post.body/>

<b:if cond='data:blog.pageType == "static_page"'><br/>

Also add following code BELOW <data:post.body/>

<b:else/>

<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;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span>

</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>

Save your template.
Customization
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

You can change these values as per your needs.