Automatic Read More/Continue Reading Hack for Blogger with Thumbnail

Ever since Blogger, introduced the new feature of using jump break everyone has been using it in their desired position. But with the help of the following code which I am posting you need not worry about having to use the jump-break. It automatically summarizes the post and it detects the presence of a picture and automatically changes the summary of the post. Also it does not provide the normal read more link below the summary, instead it displays read more on "title of post here." In order to demonstrate the effect more clearly I will be uploading a picture of the effect.

Follow these steps to install the hack:

NOTE: I recommend saving your template before doing any edits as it helps you to revert back in case you are not pleased with the 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 == &quot;static_page&quot;'><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.


Code sourced from blogger-help.com

Cheers,
Kaushik