Auto Read More with image thumbnail

Auto Read More with image thumbnail is a great tweak for blogger blogs. It give them beauty as well as ease of access. Visitors will find Auto Read More with image thumbnail a great thing, helping them understand and visualize what a post about is and what is explained in it. A picture worth’s thousands of words therefore a post summary with image thumbnail makes the blog itself a worthy thing and help authors increase visitors and viewers.
Features and Installation technique is defined under specific headings so that everyone can understand easily what he or she is going to add to his or her blog.

Features

• No need to manually enter Line Break in every post.
• First image of the post will be chosen as the summary image.
• Width and height of summary image is customizable.
• Custom settings for both with or without image summary.
• No external file, therefore no worries about the stopping of the code.next

Installation

1. Login to your Blogger account.
2. Go to Dashboard > Template > Edit HTML.
3. Copy paste first code before </head>.
4. Search for <data:post.body/>.
5. Replace <data:post.body/> with the second code
6. Customize the first code if you want.
7. Save template, and you are done.

First Code

<!-- Auto read more script Start -->
<script type='text/javascript'>
var noImgSum = 200;
imgSum = 100;
iHt = 320;
iWd = 240;
</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 autoReadMore(pID){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = noImgSum;
if(img.length>=1) {
imgtag = '<img id="autoReadMoreImg" src="'+img[0].src+'" width="'+iWd+'px" height="'+iHt+'px"/>';
summ = imgSum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End -->

Second Code

<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == "item"'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<data:post.body/>
<b:else/>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'> autoReadMore("summary<data:post.id/>");
</script>
<a id='readmore' expr:href='data:post.url'>Read More ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->

Customization

• In the first code you can Customize these values
• var noImgSum = 200; 200 is the characters in no image summary.
• imgSum = 100; 100 is the characters in image summary.
• iHt = 320; 320 is the height of summary image.
• iWd = 240; 240 is the width of the summary image.
• In the second code you can change Read More ... to your desired sentence.