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 type='text/javascript'>
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
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;

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 description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; +' itemprop='description articleBody'>
<div style='clear: both;'/>
<!-- clear for photos floats -->
<div class='post-body entry-content' expr:id='&quot;post-body-&quot; +' itemprop='articleBody'>
<div style='clear: both;'/>
<!-- clear for photos floats -->
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'>
<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/>

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

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

<b:if cond='data:blog.pageType == "item"'><data:post.body/></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.


This is what I’ve been looking for! I thought you could only do it in wordpress but I followed your steps and did it in blogger and it looks fantastic. Thanks Ellie! 🙂

The images do look haywire but unless I add another image on top of my every post with the proportions I want, I don’t think I can fix it.

Yeah it’s very hard to get the scale right, I always upload my first image at the same size which makes it easier then to calculate the scale in order to change it for the last step. Glad you liked the tutorial! 🙂


Thank you for this post. I am trying to do this to my blog now however I see there are about 4 in my current html template. Can you help me out?


I love this! I’ve been trying to figure out how templates do this.

Two questions: is it possible for the post to tell the script which image to use (if multiple images get used), or will the first always be the one used?

I also use a subtitle on my posts (div class=”subtitle”), but this treats it as typical text, essentially removing the formatting. Is it possible to set the subtitles so that they’ll stay that way on the homepage, too?

Thank you!

Hi, I can find the HTML code fine, but I can’t find the at all!? Any ideas of what I’m doing wrong here or what else I can do? Im so desperate to get this going, you are a computer genius! Fabulous site x

Hello, thanks you. Unfortunately comments don’t allow HTML, I am trying to find a solution to this. Can you paste the part you can’t find here, press encode and then paste the result as a reply to this comment so that I know which part you are having trouble finding 🙂

Hi ellie, will the code for stretched/skewed images that you have above work if i implement to fix the images in my skewed images that are in a popular post widget?

Hi Ellie!

This post is great! I’ll include this site in my bookmarks of kick ass tutorials! May I ask for your help. My read more link suddenly disappeared but I still have it in the HTML template. What are the common mistake made for this to happen?

Thanks in advance!

Hello Alu, thank you so much. Double check and make sure that there’s nothing missing from the code or the link isn’t set to be hidden. These are the only things I can think of 🙂

I applied this and it works perfectly fine but because of this my favicon stopped showing !
now all i see is the ugly blogger logo as a favicon.
My website on which i was working was

I tried to restore the previous template backups but nothing seems to be working, please can you help? 🙁

It was showing up before i applied this … I cross checked that if I accidently removed anything but nope!

Something went wrong somewhere 🙁 and I dont know where please help!


Thanks for your tutorial, it worked for me, however some of my photos now don’t want to show up on the homepage. They’re fine when you click through to the actual post, but the excerpt image is missing. Only happening for some though! Any ideas on how I can fix this?

Many thanks,

Hello. It seems to be conflicting with another script in your template for making your images the full width of the post since we set the thumbnail size in the script above also. That’s the only issue I can see.

This worked, thanks so much! I was wondering though, is there any way to make the summary justified instead of aligned to the left?

Hello. Yes, on the fifth last line of the script (step 1 in tutorial) you’ll see var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';. Replace it with var summary = imgtag + '<div id="sum">' + removeHtmlTag(div.innerHTML,summ) + '</div>'; and then add #sum { text-align: justify; } to your CSS.

Hello Jamie, your post footer is actually overlaying your blog pager blocking it from being clicked. Here’s what to do – find .post-footer and remove the code you added for the post divider. Instead we’ll use this tutorial for adding post divider that won’t affect the older/newer links so add .post { background:url(''); background-repeat: no-repeat; background-position: bottom center; padding-bottom: 30px; margin: 20px 0px 20px 0px; to your CSS. Hope that helps!

Thank you so much for this awesome post! I am terrible with HTML/coding/all computer magic, and this is working so nicely. Thanks! Just one question–is there a way to set the thumbnail image height, but have the thumbnail image width automatically adjust itself to ‘fit’ so the image isn’t distorted? I don’t always use the same sizes for my photos, so I’d love if it could sort of ‘fix’ itself. Hope that makes sense.

Hey! This is a fantastic tutorial, I have managed to follow the instructions and do this but did wonder, when reading your other post about changing the test ” Read more from this post ” It didn’t work, I wondered because I customized it with this code if there was another way I could change it to show a ” read more ” image instead of where it shows above 🙂


Hello lovely, yes you’re right! In step 2, the second code box where it says <span class='jump-link' style='float:right;padding-top:20px;'><a expr:href='data:post.url'> read more "<data:post.title/>"</a></span> replace read more "<data:post.title/>" with the image. I’ve updated the tutorial above to include this information 🙂

Hi Ellie!

Thank you so much for this tutorial, it has really improved the appearance of my blog. I was wondering if there is a way to make the thumbnail the full length? And then have the preview sentences of the post beneath that. If i’m not explaining it clear, check out I would like my previews to look like how hers are, so the thumbnail image is large.

Thank you for your help!

Hi ellie,

I used this tutorial a couple weeks ago and it worked fine, but suddenly its stopped? All the coding is in the html but nothing is happening on my blog? It just shows the whole post.

Thank you for your help

Hi Ellie, is there a way to have the images the size they are already on the blog. As i have vertical images on my blog and they look odd stretched

Hi..This is a useful blog…this trick worked for me but the first 2 posts shows some codes other than the actual content…can you tell me how to fix this?

Hello, the codes showing is actually coming from your blog post because they were pasted from a Word Document. To remove it go to edit post, click the HTML tab instead of compose mode in the post editor and then you’ll see the formatting codes from Word that you can remove 🙂

I couldn’t find a proper method to remove ms word formatting created in HTML…please give a solution for removing those formatting

Hi Ellie,

I just came across your blog and its amazing – you explain everything so well! I’m wanting to start up my blog again (after a long hiatus) and have been tweaking it in between studying for my final exams.

I love the way you’ve edited the posts to display it above. However, if I didn’t want to use this display for my home page, but for search results (i.e. when clicking ‘xyz’ on my navigation bar and the displays the posts with the label ‘xyz’). Is this at all possible?



The code works perfectly but I wanted to know if there’s a way to keep the thumbnail centered above the summary? Where it would appear like this..

Read More

Is it possible for the thumbnail to remain the same size as the original photo(s) w/o changing its dimensions? Where as it would just show the first photo (in its original size ) only then summary and read more ?

Any help would be appreciated! Thank you so much!

Thanks! You are great. But there is one more thing I would like to get from here- that is to show post from specific Label/Category. Can you add it on this script? Thanks once again…

Great post and simple to follow and review the HTML code while following along, and based on all the comments it’s a total gem of a post 😀 So thanks, I did have one quick question is it possible to point the thumbnail to a different image within the post or will it always go the the first image?

Or would this be within the HTML of the post itself?

This is the best tutorial Ive seen online , you ar amaazing thank you . I was just going to ask the same question , i cant show more than 4 posts per page and when I change the layout it doesn’t work , how can I solve this please ?

Thank you, thank you, thank you! I have been all over the web looking for a tutorial that worked on my blogger blog. Yours worked and it looks great! I am so pleased and so very grateful for all the little snippets of code and tutorials that you share. They are much appreciated.

Hey Monica, thank you 🙂 this will explain the post excerpt part and then just add some code to grab the featured image. I believe there’s also plugins, and some templates / frameworks have the option in settings 🙂

Is there a way to either crop the thumbnail image automatically or just specify the heigh (or width) and let the other dimension update to fit? Thanks!

Hello. You can change img_thumb_height = 200; to img_thumb_height = '';, that will allow the height to adjust automatically depending on the width. The same goes for the width 🙂

Thank you so much! I just saw that you had already answered this earlier in the comments. Sorry! But thanks for taking the time to answer anyway.
I have one more question:
I want to add a page to my blog that is just images. I want to show each image as a thumbnail at…say…200px X 200px (possibly cropped to show just a specific portion of the original image). Then when the user clicks on the thumbnail, I want the image to show up in lightbox at its original size.
I’m a complete noob and would appreciate it if you could even point me in the right direction. Thanks again!

This works great on my blog and I love it! I turned on my sharing buttons for my posts…but I think it’s kind of silly to have them on the excerpts on the homepage as well. I doubt anyone will share my post before they’ve read it.
Is there a way to remove the “share buttons” from my excerpts but KEEP them on the full post?
Thanks for your help!

i want to make summary text have formatting text (Bold, italic and strike) it’s possible?

Hey there! I have LOVED using your tutorials, and I’ve learned so much from you! I really would like to use this tutorial to make my home page cleaner (my blog posts tend to be VERY long), and when I changed the coding, it worked very well. However, the search and label pages still show the full posts rather than summaries, which takes forever to load. Is there anything I can modify here to show post summaries on the home page, search pages, and label pages? I’d appreciate it if you could help! Thanks so much.

Hey , first of all thanks a lot for this , my homepage looks a lot better now . Is there some way that I can link the thumbnails to the post ?? Only the title and read more are “clickable” That would be great. Also how do I remove the title??

You can remove the title within your theme (it looks like data:post.title but you’ll want to remove the whole section – heading tag, link and title) though I would advise against this for SEO reasons. As for adding a link, you would need to edit both sets of code above to pull the link information (in step 2) and place it in a variable (in step 1). You could use the code here as an example to help manipulate the code above.