Add Auto Read More with Thumbnail on Blogger

       This nice trick will automatically create post summaries with thumbnails. You don't need to add any extra code in every blogger post that you make.

Step 1:


         1.Login to your Blogger account.

         2.Go to "Blogger Dashboard" > "Template" > "Edit HTML".

         3.Back up your template.

         4.Check the  "Expand Widget Templates".

         5.In the code window, search for (Ctrl + F) </head> tag.

         6.Add below code just before </head> tag

<script type="text/javascript">
var summaryConf = {
    showImage: true,
    imgFloat: 'left',
    imgWidth: 120,
    imgHeight: 90,
    defaultThumb: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyE3dhEIrrOYqFQGowGSL4ZmuImwMlDtoSM7DPpyt5V4Jt5QC75JMXM5XSlb1eLGoTPAP8S8KaVzdJYxrcDJ3WHTknib7avBgwGtKE-bpYN8KXN00bO59YD1J91_IYaAq8dhK4gIWwSeA/s1600/no-thumb.jpg',
    words: 65,
    wordsNoImg: 80,
    skip: 0,
    showHome: true,
    showLabel: true
};
</script>
<script type="text/javascript" src="http://srvsriram.googlecode.com/files/summary.js"></script>

Step 2:

    1.After that, search for (Ctrl + F) this line code:

data:post.body

    2.Replace the line with this code:

<span expr:id='data:post.id'><data:post.body/></span>
<b:if cond='data:blog.pageType == "index"'>
    <script type='text/javascript'>summary("<data:post.id/>")</script>
<span style='float:right;padding-top:20px;'><a expr:href='data:post.url'>Read More</a></span>
<b:else/>
    <b:if cond='data:blog.pageType == "archive"'>
        <script type='text/javascript'>summary("<data:post.id/>")</script>
    </b:if>
</b:if>

   3. Save your template


That’s it, enjoy!

Before you leave:
Do you find this article useful? Share it via Retweet, Share or Stumble buttons below.
Any suggestion, question or comment? Please post it in the comments below.