SackarpU

Let’s get back to blogger tutorial. At this post, How to In Blogger writes trick about automatic read more with thumbnail.
A few weeks ago, How To In Blogger wrote about How to create post with Read more in Blogger. That is the manual way, where you should click the jump break tool on an article. If you want an another alternative, you can try the automatic read more with thumbnail. With this trick, read more will be automatically formed and the thumbnail will be also automatically detected based on the images in the post/article.

How to create automatic read more with thumbnail

The following are the steps to create automatic read more with thumbnail.

1. Please login to blogger with your ID.
2. Click Design.
   
3. Click Edit HTML.
   
   
4. Please backup your full template by clicking Download Full Template
   
5. Check the small box next to Expand Widget Templates.
   
6. Find the code ]]></b:skin>, and then copy paste the following code exactly above the code ]]></b:skin>

   .preview{float:left;; padding:5px;margin:0px 20px 3px 0px !important ;height:188px;width:221px;}
   .noimage{float:left;padding:5px;margin:0px 20px 3px 0px !important ;height:188px;width:221px;}
   

7. Find the code </head>, and then copy paste the following code above the code </head>

   <script type='text/javascript'> var thumbnail_mode = &quot;no-float&quot; ; summary_noimg = 700; summary_img = 470; img_thumb_height =178; img_thumb_width = 211; </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 class="preview"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" style="margin:5px" alt="preview"/></span>';
     summ = summary_img;
    }
    if(img.length<1) {
     imgtag = '<span class="noimage"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkl5jB2wNmOBs-9gv0J-RhxQ0ecM5S_lBOrhX5p2hQVfl9W8uGlhpT3FeIvC_bTZQnyIsoVwK8KPXKlcT1RxkgI3frXIoqiUJug1uYRybLe7h4jq9ygIabqcWxJvGI3Zzk5gy6s2bDlIKd/" width="211px" height="178px" style="margin:5px" alt="preview"/></span>';
     summ = summary_img;
    }
    var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
    div.innerHTML = summary;
   }
   //]]>
   </script>

8. Find the code <data:post.body/>, or for some templates, you may find the code <p><data:post.body/></p>. Delete that code and replace with the following code:

   <b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
   <data:post.body/>
   <b:else/>
   <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;);
   </script> <span class='more'><a expr:href='data:post.url'>Read more</a></span>
   </b:if>
   <b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>
   </b:if>

9. SAVE TEMPLATE.
10. Done.

Now all posts should have the automatic read more.
Happy trying!