Automatic Read More Button With Image Thumbnail For Blogger Post

Creating a Summarized paragraph is very important part for every blog. This is because it helps to shortening the length of our homepage and also reduce the loading speed. Suppose if have 10 posts on homepage without any short paragraph and no read more option and someone visit it, Then how they feel you can also imagine.
So here i am going to provide you a best method of creating automatic paragraph with read more button and also with image thumbnail. Which make your blogs look best and also help to reduce loading speed. This is because by default blogger template do not provide this kind of features. so in that condition you have to add these scripts manually.

How To Create Automatic Summary For Blogger Post ?

Here i am going to start this tutorial. Be careful while implementation of below codes.

• Go To Blogger Dashboard >> Template

• Before Proceeding Firstly Backup your present template from the Backup/Restore button From Template section.

• Now Click on Edit HTML

• Now do Ctrl+F And Search For  </head>

• Now Paste Below Script Just above </head> Section

<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>

• After Pasting Above Script Now Search For <data:post.body/>

• This code may comes 3,4 times in your Template. We have to choose which at 2nd place. If Our script don't them try it on others codes also.

• After Searching this code <data:post.body/>  Replace it with the below codes

 

<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'> createSummaryAndThumb("summary<data:post.id/>");
</script>
<a class='more' expr:href='data:post.url'>Read more >></a>
</b:if>
</b:if>

• Now Save Your Template and You have done the all steps.

I hope you find this tutorial interesting and may successfully work for everyone. But if have kind of problem in using these code must mention your problem in comment box.