How To Add Auto Read More With Thumbnail In Blogger

Hey Guys, lets learn how to add auto read more with thumbnail in blog posts. Talking about professionalism, the auto read more gives your blog the look, gets your blog really organized and more beautiful.
What this does is to help you shorten your blog posts automatically and add "read more" link for your reader to click on and see the full content.

The steps requires you to go to your blog template, so save a copy of the template before applying the steps.

Also read
Add Recent Post Widget In Blogger
Add Floating Share Buttons In Blogger (Easy Steps)

Steps

==> Sign into blogger.com dashboard > Select the blog.

==> Locate and click on Template > Edit Html

==> Click anywhere in the template and hit Ctrl+F buttons for window, Cmd+F buttons for Mac.
==> Copy the highlighted code below and paste in the search box
<data:post.body/>
==> Press Enter key to find its location in template.
==> You might find the code up to two or three times, please make use of the second one.
==> Replace the above code with the one below

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>
<span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

 Note: If you don' t notice any change after you applied its applied, kindly replace the third <data:post.body/>  tag too with the code above

==> Now search for </head> in the template and place the code below directly above it

<script type='text/javascript'>
posts_no_thumb_sum = 490;
posts_thumb_sum = 400;
img_thumb_height = 160;
img_thumb_width = 180;
</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, pURL, pTITLE){
var div = document.getElementById(pID);
var imgtag = "";
var img = div.getElementsByTagName("img");
var summ = posts_no_thumb_sum;
if(img.length>=1) {
imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';
summ = posts_thumb_sum;
}
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
.post-footer {display: none;}
.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}
 .readmore a {text-decoration: none; }
</style>
</b:if>
</b:if>

==> Save your template, you are done.

Customization

Modify the number of character shown in homepage there isn't a photo(thumbnail) useing the 490 value in red, to modify the number of character shown when is a photos(thumbnail) in the post, the 400 value in red also.
To modify the size of the Thumb, use the values in yellow
160 height and 180 width

Hope It helps, comment if any difficulty.