How To Add Automatic Read More Feature With Thumbnails

Provide shorter blog posts on your Blogger blog by modifying the coding. By shortening the posts on the main page of your blog, you increase the blog loading speed and use less bandwidth. You also increase click-throughs, because readers will be clicking on a "Read More" or similarly worded link to the full post. Truncate all Blogger posts by modifying the HTML/CSS code in the blog template. This nice trick will automatically create post summaries with thumbnails. You don't need to add any extra code in every blogger post that you make. This method does not take a lot of coding.

1. Login to your Blogger account.


2. Go to "Blogger Dashboard" > "Template" > "Edit HTML".


3. Back up your template.


4. Check the  "Expand Widget Templates".


5. In the code window, search for (Ctrl + F) </head> tag.


6. Add below code just before </head> tag



<script type='text/javascript'>
var thumbnail_mode = "yes";
summary_noimg = 430;
summary_img = 340;
img_thumb_height = 90;
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(thumbnail_mode == "yes") {
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>



7. After that, search for (Ctrl + F) this line code:



<data:post.body/>



8. Replace above code with below code.



<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<p style="display:none;"><a href="http://bloggerxtutorials.blogspot.com/">Blogger X Tutorials</a></p>
<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>
<a class='more' expr:href='data:post.url'>Read more ...</a>
</b:if>
</b:if>



9. Save your template and you are done.

That's it, enjoy! If it doesn't works for you then mention it in comments. I'll glad to help you.

You can change below values as your choice.

summary_noimg : number of character to display when there is no image.
summary_img : number of character to display when there is an image.
img_thumb_height : hight of the post thumbnails.
img_thumb_width : width of the post thumbnails.