How to add Auto Read More with thumbnail for Blogger

How to add Auto Read More with thumbnail for Blogger- Today we are going to know how to make posts in the blog homepage that to be displayed with an automatic read more text or a thumbnail. Specifically, this will show title of evry post, with a shorted summary with few number of characters and a thumbnail too, that will be the thumbnail of the first image of that post which uploaded inside the post. After the thumbnail and the post summary of the post, there will be a "Read More" linking when you click on it, it will take you to post page.

And this Automatic Read More script will show the summarized content post that will be shown in homepage, category pages, and archive pages of your blogspot site. As i mentioned the details above, then you can say this is best auto read more posts widget for blogger.

How to add Auto Read More with thumbnail for Blogger

Step 1. goto Blogger dashboard, go to Template and click on the Edit HTML button.

Step 2. now click anywhere in the code editing area, now press the CTRL + F key to search the code

<data:post.body/>

Note: now you'll find this code more than once so you need to stop when you found the third one.

Related: Show Recent Post With Thumbnails

Step 3. Replace the above code with bellow codes:

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<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;,&quot;<data:post.url/>&quot;,&quot;<data:post.title/>&quot;);</script>

 <span class='readmore' style='float:right;'><a expr:href='data:post.url'>Read More &#187;</a></span></b:if></b:if>

<b:if cond='data:blog.pageType == &quot;item&quot;'><data:post.body/></b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><data:post.body/></b:if>

Note: after the change if you don't see any result then please try to replace the second <data:post.body/>

Step 4. Now you should search for the following head tag </head>

Step 5. Just above the </head> tag, add the bellow code:

<script type='text/javascript'>

posts_no_thumb_sum = 490;

posts_thumb_sum = 400;

img_thumb_height = 160;

img_thumb_width = 180;

</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, pURL, pTITLE){

var div = document.getElementById(pID);

var imgtag = "";

var img = div.getElementsByTagName("img");

var summ = posts_no_thumb_sum;

if(img.length>=1) {

imgtag = '<span class="posts-thumb" style="float:left; margin-right: 10px;"><a href="'+ pURL +'" title="'+ pTITLE+'"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px" /></a></span>';

summ = posts_thumb_sum;

}



var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';

div.innerHTML = summary;

}

//]]>

</script>



<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<style type='text/css'>

.post-footer {display: none;}

.post {margin-bottom: 10px; border-bottom: 1px dotted #E6E6E6; padding-bottom: 20px;}

 .readmore a {text-decoration: none; }

</style>

</b:if>

</b:if>

Note:
- To change the number of characters if there is no image thumbnail just simply modify the 490 value in blue color. For the number of characters shown when a post has a thumbnail, simply modify the 400 value.
- And if you want larger thumbnails in your homepage, simply modify the 160 (height) and 180 (width) values in red color in codes that we share.

Step 6. Now finally click the Save template button to save template and you have done it easily.