Create Blogger Post summary with rotating thumb

Step 1 - Back up your template!
It is important to back up your Blogger template before making any edits. This ensures we can easily restore the working template if anything goes wrong.

To back up your Blogger template, go to Design>Edit HTML in your Blogger dashboard and click the Download Full Template link near the top of the page.

You'll be prompted to save an XML file to your computer hard drive - this XML file includes all of the HTML and widget templates required to display your current Blogger design. Be sure to save this in an easy to remember location and make a note of the file name in case you later need to restore your working template.

Step 2 - Add the code to display summaries with rotating thumbnails

Login your blogger account and go to Template -> Edit HTML and find:

</head>

You can use Control+F to find to find these word.

Paste the below code above </head>

 <!-- rotating thumb summary The Internet surfer(theinternetsurfer.blogspot.com) -->
<style type='text/css'>
.post-body {
        padding: 0 0 10px 0;
      }
      .thumb-post img {
        padding: 4px;
        margin:0 0 0 15px;
        width: 72px;
        height:72px;
        background: #fff;
        border: 3px solid #008ABD;
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px; border-radius: 50px;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
      }
      .post:hover:hover .thumb-post img {
        border: 3px solid #cccccc;
        -webkit-transition: all 0.5s ease-in-out;
        -moz-transition: all 0.5s ease-in-out;
        -o-transition: all 0.5s ease-in-out;
        transition: all 0.5s ease-in-out;
        -webkit-transform:rotate(360deg);
        -moz-transform:rotate(360deg);
        -ms-transform:rotate(360deg);
        -o-transform:rotate(360deg);
        transform:rotate(360deg);
      }
    </style>

<script type='text/javascript'>
      var thumbnail_mode = &quot;no-float&quot; ;
      summary_noimg = 300;
      summary_img = 280;
      img_thumb_height = 100;
      img_thumb_width = 110;
    </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");
        if(img.length<=0) {
          imgtag = '<div class="thumb-post"><span style="float:left;margin-right:5px;"><img src="http://2.bp.blogspot.com/-nhuSf1wkkdE/Ui3oc1dvxKI/AAAAAAAAAD8/y_tXuUdXEHU/s1600/folder.jpg" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>';
          var summ = summary_noimg;
        }
        if(img.length>=1) {
          imgtag = '<div class="thumb-post"><span style="float:left;margin-right:15px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span></div>';
          summ = summary_img;
        }
        var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
        div.innerHTML = summary;
      }
      //]]>
    </script>

Now Find <data:past.body/> and Replace it 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/>
<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>

 Customizing the snippet

You can customize the read more by changing the values of the variables below:

summary_img = specify the number of characters  you want to show in the summary, with thumbnail.
summary_noimg = specify the number of characters you want to show in the summary, when there is no thumbnail.

img_thumb_height = specify the thumbnail height.

img_thumb_width = specify the thumbnail width.