How to Add Auto Read More on Blogger with Default Thumbnail

First of all, this isn't my code but I made a slight revision so that it can also add default thumbnails to post with no images.

Steps on Adding Auto Read More with Thumbnail

1) Go to Design > Edit HTML

2) Back up your current template in case something happen along the way (*Required)

3) Search for the closing head tag similar to this </head>

4) BEFORE the </head> tag add this:

<script type='text/javascript'>
 // replace the number of characters to show
 summary_noimg = 450;
 summary_img = 280;
 
 // replace with the height and width of the image thumbnail
 img_thumb_height = 200;
 img_thumb_width = 200; 
 
 // replace with the default thumbnail in case there is no image available
 img_thumb_nosrc = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQ6HUZsvrY9CPqvvUVegMnsa80uQeyWXl_4l5g4rtguLviPtGcA_FMDmpdtF7-dJ1hug7WzqphP1HMEoybEMxcd2pfbeyffGwuKt0mXnD86rH_q9SwwFdcFHuoji5lVPUZfR1dgGQgwc0/s0/default.jpg";
</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;

  // this block of code is used to add default thumbnail to post without images 
  if(img.length<=1) {
   imgtag = '<div style="clear:both; margin:0 10px 10px 0px;float:left;"><img src="'+img_thumb_nosrc+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></div>';
   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>

5) Then look for:

<data:post.body/>

and replace it with:

<b:if cond='data:blog.pageType != "static_page"'>
 <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'>
   <a expr:href='data:post.url'>
    <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5ASy5_LD32X3SR1IAEnj2p0DUqkycBQrwRYtoKPUlyjUXeHUKzh1OG9KJ9DPlFkHt1FXOa_0MoNkcLq_VOkTaEW8tfkrWYyk5RenVcpx4NzsSbJbFzwyOvq2lH2Uqjn7L0EKFLUJ2Mpg/' style='border-style:none;'/> 
    <!-- 
      THE IMG ABOVE IS A "READ MORE" IMAGE, 
      REPLACE THE "SRC" IMAGE 
      OR JUST USE PLAIN TEXT
    -->
   </a>
  </span>

 <b:else/>
  <data:post.body/>
 </b:if>
<b:else/>
 <data:post.body/>
</b:if>

6) Now save your template and it's done.