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.

Show-post-excerpts-with-thumbnail-on-your-blog

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 (image size, image position, read more button style, read more button position, etc.) or 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.

Related Posts

Customise the read more jump link on blogger.
Customise the “Newer & Older Posts” Link on Blogger.
Rearrange your post header and footer – labels, author, date.
Remove borders and shadows from images and blog content.

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

104 comments

  1. Aman on

    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.

    Reply
    • Ellie M on

      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! 🙂

      Reply
  2. Cameron on

    Ellie,

    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?

    Thanks,
    Cameron

    Reply
  3. Matthew Wimer on

    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!

    Reply
  4. Sara on

    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

    Reply
  5. Sarah on

    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?

    Reply
  6. ALU on

    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!

    Reply
    • Ellie M on

      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 🙂

      Reply
  7. Syed Ommer Amer on

    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 http://www.digitalraconteurs.blogspot.com

    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!

    Reply
  8. Alex on

    Hi,

    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,
    Alex
    http://made-forme.blogspot.co.uk/

    Reply
    • Ellie M on

      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.

      Reply
  9. Aki on

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

    Reply
    • Ellie M on

      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.

      Reply
    • Ellie M on

      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('http://2.bp.blogspot.com/-vzrDTw8sdRI/Uw1TpOhZleI/AAAAAAAAVvk/SfONgyb_ftM/s1600/post-border2.jpg)'); background-repeat: no-repeat; background-position: bottom center; padding-bottom: 30px; margin: 20px 0px 20px 0px; to your CSS. Hope that helps!

      Reply
  10. Rachel on

    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.

    Reply
  11. Lucie on

    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 🙂

    Thanks!

    Reply
    • Ellie M on

      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 🙂

      Reply
  12. Nik on

    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 http://www.lilypebbles.co.uk I would like my previews to look like how hers are, so the thumbnail image is large.

    Thank you for your help!

    Reply
  13. Nik on

    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

    Reply
  14. Lauren on

    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

    Reply
  15. farman on

    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?

    Reply
    • Ellie M on

      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 🙂

      Reply
  16. Emma on

    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?

    Thanks!

    Reply
  17. Nana Ferrari on

    Hi,

    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..

    Thumbnail
    Summary
    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!

    Reply
  18. Marc on

    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…

    Reply
  19. Alan Gamble on

    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?

    Reply
  20. Debbie Howard on

    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.

    Reply
    • Elaine M on

      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 🙂

      Reply
  21. Thom on

    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!

    Reply
    • Elaine M on

      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 🙂

      Reply
      • Thom on

        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!

        Reply
  22. Thom on

    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!

    Reply