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 = "http://4.bp.blogspot.com/-nkJEHcmwh4Y/TxcyejuyxlI/AAAAAAAAAoo/IIXt0WJVB8k/s000/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='http://2.bp.blogspot.com/_4HKUHirY_2U/THTTDZPiOTI/AAAAAAAABQU/7TWyRztUC-Q/9-mini-allblogtools.gif' 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.

5 comments :

  1. Yo! pre, ngaun lang ulet ako napadaan, haha. Sa tingin ko mdami visitors kpg mga ganito topic hindi ko nga lang masyado maintindihan.

    ReplyDelete
  2. thanks for dropping by Henry.. hahaha.. bibihira na lang din naman ako makapagpost dahil sa sobrang busy.. :)

    thanks ulit!

    ReplyDelete
  3. Autoledshopuk2/16/12, 9:32 PM

    thanks for your post.

    xenon bulbs

    ReplyDelete
  4. Very helpful. Thanks :D


    I'll be applying this to my blog for like a week and "see what happens". XDD

    ReplyDelete
  5. David Kutcher7/30/12, 11:47 PM

    We were using a similar script until we got too frustrated with the lack of customization ability, and the fact that the thumbnail images were always messed up. So we coded a better script that provides more customization and fixes the thumbnail issues!

    ReplyDelete