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 == ""'>
<!-- Then use the post body as the schema.org description,
for good G+/FB snippeting. -->
<div class='post-body entry-content' expr:id='"post-body-" + 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='"post-body-" + 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 + "#more"' 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 == "static_page"'><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.
112 responses to “Show post excerpts with thumbnail on your blog”
Hello! I’m trying to do this but when I go to search for “” its showing no results. Thanks!
Hello, can you write the part you’re looking for without symbols, just the letters of the word. HTML doesn’t show in comments so not sure what part you’e at. Make sure you click Format Template before clicking CMD F on a Mac or CTRL F on a PC to search. If you’re still having trouble, check out this post for the steps to take – http://xomisse.com/blog/search-find-code-bloggers-new-html-editor/
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! 🙂
I think your posts are brilliant ! Super customisatons
thank you
paul
Awh thank you Paul! 🙂
i know want i do in the christmas holidays.
i will read all your tutorials and do some changes at my blog.
Wow that’s a lot of reading! Let me know how you get on 🙂
Awesome tutorial! Thank you so much for sharing!
xo
Coco
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
Hello, yeah there will be numerous ones in your template. Find the ones under
div class='post-body entry-content'
🙂Hi Ellie! Followed your steps but now the date is missing from my round date display. Please help!
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!
Hello, thank you. No it’s not possible for Blogger I’m afraid as the script pulls the first part (image and text) to be displayed in it’s own div.
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 🙂
<data:post.body/>
Thank you very much!
Ahh okay. Make sure to click Format Template then search for
post-header-line-1
, a couple of lines under this you should see<data:post.body/>
if you are having trouble using the find tool, check out this post. Hope that helps 🙂You are amazing!! I hope you realise how great you are at this… Great work.
Awh thank you so much 🙂
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?
No, it sets the width/height within the script which is just for the post excerpt.
Thanks for the great tutorial! Is there a way to make the first post appear in entirety and just truncate the posts after that?
thanks,
Jamie
Hello Jaime, I’ll have a post on this in the future.
I was hoping for this too!! 🙂 Would love to have the first post appear in its entirety and truncate the rest.
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 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!
Hello, I’m seeing the custom favicon in 3 different browsers. Try clearing your cache, this tutorial shouldn’t cause a problem with your favicon.
Yeah ! Problem solved! It was my browser malfunctioning!
Sorry … it was mistake on my side!
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/
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.
Thanks, can I remove the script from your code dictating the thumbnail size? If so which bit would need removing?
Thanks very much!
No it’s needed to create the excerpt. You could try setting the thumbnail to the full width of your post and see if that solves the problem.
I tried this and nothing happened!! It’s exactly the same…. ?! Could I have put the code in the wrong space?
Hello lovely. Make sure you’re placing the script in the correct place and replacing all instances of the code
<data:post.body/>
in your template.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 withvar summary = imgtag + '<div id="sum">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
and then add#sum { text-align: justify; }
to your CSS.Hi, I just noticed that the home, older/newer post links at the bottom of my home page no longer works since I added this code. Any idea how to fix it? It doesn’t work when you click on a label and the archives are listed either… here is my page: http://www.scatteredthoughtsofacraftymom.com/
Thanks, Jamie
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!Wow! How in the world did you figure that out? Thank you, I was able to fix it no problem!
~Jamie
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.
Change
img_thumb_width = 300;
toimg_thumb_width = '';
, that will allow the width to adjust automatically depending on the height that is set.That worked perfectly–thanks so much for the response!
The original code + this last piece of advice you gave Rachel are exactly what I was scouring the internet for. Thank you very much!
Thank you. It works great with me. I applied it with a little modifications.
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!
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>
replaceread 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 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!
Hello, yes change the numbers as shown in step 3 🙂
It isn’t working on blogger SIMPLE template. Any reason or I’m doing something wrong?
It’s been tested using Simple template and working, please try again. Make sure to follow instructions exactly.
It works great for me. Took me a few tries but got it.
Hi Ellie!
Thank you for sharing these wonderful tutorials! I’ve been coming back here for these codes to put in my blog.
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
Hello, did you change any settings or edit your template at all?
omg got it!
thank you
thank you
totally going to link you
No problem, glad you got it working 🙂
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
Change
img_thumb_height = 200;
toimg_thumb_height = '';
, that will allow the height to adjust automatically depending on the width.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
You have to manually remove them from the post editor.
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!
Hello Emma, thank you! Yes kind of, I’ll have the tutorial up in a few days for you.
Here you are, hope this helps! – http://wp.me/p3sOqd-1fc
Hi Ellie,
Thank you, you’re an absolute star! I’ll get back to you when I get it onto my blog and have a play around with it 🙂
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!
Alter the thumbnail width to be the same size as your post. Change the float values to none. Then the summary will appear as you have described 🙂
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…
Hello, yes you can have it so it only shows on certain labels. It would be something similar to this tutorial using conditional tags.
Works like a charm! I love your site and the direction you give is very clear and thorough. Thank you so much.
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?
Hello, no unfortunately this is not an option on Blogger, it’s the first image.
Great post ever!!
How many posts’ thumbnail will be shown in my blog homepage though??
thanks
You can control that in settings 🙂
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 ?
Hello Amira, thank you. Go to Settings > Posts and comments > Posts > Show at most and change the amount there 🙂
very nice and amazing post thanks for sharing
This works wonderfully! I was having a hard time figuring out how to do this until I came upon your blog. Thanks so much!!
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.
Thank you very much Debbie, I’m glad the tutorial worked so well for you!
Hello, I used this tutorial and it worked great but afterwards I decided that I didn’t want my posts in summary any more so I tried to take the additional code out which worked but now when I go to the specific url of posts the post doesn’t actually show up e.g. http://www.hollysparkle.co.uk/2015/03/hillarys-crafternoon-blogger-event.html
What did I do? Thanks you!
It’s okay I found the part that I hadn’t taken out!
Your tutorials are great btw, I’ve used a few of them now 🙂
How to make a post summary with thumbnail but without the text? Thank you!
Thanks so much! It worked on my blog. You are awesome! 😀
Great tutorial, Ellie!
But does anyone know how to this in WordPress? Thanks in advance.
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 🙂
Wow, the easiest tutorial so far, and the only one that worked for me, honestly. Thank you!
Thanks Kat! So glad it worked for you 🙂
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;
toimg_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!
Hello. Check out this tutorial, it will show you how to only show the icons on single post pages 🙂
Hello, thanks for the tips.
Wondering is there any way to auto height for img-thumbnail because it’s looks weird for portrait photo.
Change
img_thumb_height = 200;
toimg_thumb_height = '';
, that will allow the height to adjust automatically depending on the width.Hello! I just have a little problem with the results, the labels part….how can i float it to the left without using br & div float code?Thank you!!!
Hello. You can add
<div style='clear: both;'/>
beneath the code for the read more button.Thanks this works fine, though, I have issues with the customzing the Read More link.
Anything I can help with? Have you checked out the post dedicated to editing the read more link here?
i want to make summary text have formatting text (Bold, italic and strike) it’s possible?
You can style it using CSS, but with this method you can’t get it to keep the formatting of the post.
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.
Hi Katie, you can use conditional tags for this!
Hi, is it possible to create a set of posts from this code as it is on this blog http://classynew.blogspot.de/?
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.Thanks !! you’re the best.
I want to hide those short snippets from the homepage of my blogger website. which shows under the Post Thumbnail.
From the snippets line from the code above 🙂