Show post excerpts with thumbnail on your blog

Today’s tutorial will show you how to create post summaries with a thumbnail on your main blog page.

You could do this by manually adding jump links while writing posts, but this is a way to automatically add a “read more” button to each post on your blog.

It can make your homepage appear neater, load faster and can help readers easily scan through multiple posts and see what grab’s their attention.

Change post layout – show post excerpt/summery with featured image

1. Go to Template > Edit HTML and find </head>, paste the following right above it.

<script type='text/javascript'>
var thumbnail_mode = "yes";
summary_noimg = 300;
summary_img = 350; 
img_thumb_height = 200; 
img_thumb_width = 300;
</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 = '<div class="xopostimg"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height +'px"/></div>';
summ = summary_img;
}
var summary = imgtag + '<div class="xopostsummary">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>

2. Now find <data:post.body/>, skip the first one which is for mobile and go to the next. You’ll see something similar to this

<b:if cond='data:blog.metaDescription == &quot;&quot;'>
 <!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='description articleBody'>
<data:post.body/>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; + data:post.id' itemprop='articleBody'>
<data:post.body/>
<div style='clear: both;'/>
<!-- clear for photos floats -->
</div>
</b:if>
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
<data:post.jumpText/>
</a>
</div>
</b:if>
<div class='post-footer'>

Replace <data:post.body/> with the code below. If you have two <data:post.body/> in your template within this section, you may need to replace them both.

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

<b:if cond='data:blog.pageType != "item"'>

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <div class='jump-link' ><a expr:href='data:post.url'>Read more "<data:post.title/>"</a></div>

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

3. The image is wrapped with class xopostimg and text is wrapped with class xopostsummary. You can use these selectors to style that section further in the CSS.

/* Style Post Excerpt - XOMISSE */
.xopostimg { /* Style Post Excerpt Image - ADD CSS BELOW */ 

}
.xopostsummary { /* Style Post Excerpt Text - ADD CSS BELOW */ 

}

4. To style the read more button to suit your blog design go to Template > Edit HTML and find ]]> </b:skin>. Add the following code above ]]> </b:skin>

/* Style Read More Link - XOMISSE */
.jump-link { /* Style Entire Jump Link - ADD CSS BELOW */ 

}
.jump-link a { /* Style Jump Link Text Link - ADD CSS BELOW */ 

}
.jump-link a:hover { /* Style Jump Link Text Link On Hover Over - ADD CSS BELOW */ 

}

Add your styling in between the brackets. Check out this link for more ways to customise the read more link.

To change the read more text link you’ll need to edit the section of the above code that looks like

<div class='jump-link' ><a expr:href='data:post.url'>Read more "<data:post.title/>" </a></div>

Check out this tutorial to customise the read more jump link on blogger. To use an image instead of text – replace read more “<data:post.title/>” with the image code as shown in this tutorial.

5. To change the height and width of the thumbnail you can alter the numbers in this section of the code

img_thumb_height = 200; 
img_thumb_width = 300; 

If your thumbnails image are looking a little squished, alter the values below

summary_noimg = 300;
summary_img = 350; 
img_thumb_height = 200; 
img_thumb_width = 300; 

to change the height and width of the summary & images. You can also make the images full width and automatic height.

6. You can make some adjustments to the tutorial to change the style or layout like the image size, image position, read more button style, read more button position, etc.

If you don’t want to do it yourself or aren’t sure what to change, check out our Custom Coding Service to get this style, a featured post layout or a Pinterest style grid layout installed.