Auto Read More with thumbnail for Blogger/Blogspot Posts

How to make posts in the blog homepage to be displayed with an automatic "read more" button and a thumbnail.

To be more specific, this will show the title of the post, a short summary with a number of characters and a thumbnail, that will be the thumbnail of the first image uploaded inside the post. After the thumbnail and the post summary, there will be a "Read More" link which, when you click on it, will take you to the actual post.

This Automatic Read More script will summarize content and the post summary will be shown only on the main blog page (homepage), category pages, and archive pages.

Using the Automatic Read More feature in Blogger Posts

Step 1. From your Blogger dashboard, go to "Template" and click on the "Edit HTML" button:

Step 2. Click anywhere inside the code area, then press the CTRL + F keys and search for this tag (hit Enter to find it):

<data:post.body/>

Note: after hitting Enter, you'll find this code more than once but you need to stop at the third one.

Step 3. Replace the code above with this one:

<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: if you don't see any changes after going through all the steps, please try to replace the second <data:post.body/> as well.

Step 4. Now search for the following tag:

</head>

Step 5. Just above the </head> tag, add the following script and CSS 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="Auto Read More with thumbnail for Blogger/Blogspot Posts"><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 shown when there is no thumbnail, modify the 490 value in blue. For the number of characters shown when a post has a thumbnail, modify the 400 value.
- If you want larger thumbnails, modify the 160 (height) and 180 (width) values in red.

Step 6. Click on the "Save template" button to save the changes.

And this is how you can add auto read more with thumbnail to Blogger posts. Enjoy!

Share this post