Summary & Excerpt Post Format (Blogger)


Today we come to a somewhat complicated tutorial. This is for BLOGGER only. If you are not comfortable with editing your template, you might want to hold off on this tutorial. However, I will have step by step instructions here and a YouTube video that also walks through all of the steps visually. The code that is shown below isn’t code that I wrote, I just found it on the internet a long time ago. I did make a couple of adjustments to the image sizing so that the thumbnail images don’t look scrunched up. So what am I talking about anyways? What do summary/snipit posts look like? Well, I’ve done a number of designs now that have this post style format.

To follow along with the video, just click the image below:

diy youtube

Don’t forget to change the resolution to 720!


Now there are two parts to this tutorial, the JavaScript and the HTML. Let’s talk about the Javascript first.


You see that part at the very beginning that says Image Thumbnail Width, Image Thumbnail Height, Length of Summary Text if no image is Used, and Length of Summary Text if post has Image Thumbnail? Those are the 4 number values that you can change. The width and the height numbers are the width and height of your featured image. Not every post has an image though and the second two numbers lets you specify how much text you want displayed. You can play around with those numbers to see what works best for you.

Once you have your JavaScript set, go to Blogger > Template > Edit HTML (button) and search for

Then paste in your javaScript BEFORE that tag.


This is the HTML you’ll need to create the summary/snipit post format:

Here is where things can get tricky because Blogger templates can be very different. However, every Blogger template will have this piece of code somewhere:

This code is how all of your post content gets displayed! Most templates will have three of these post.body tags. The first is for the mobile template. The second two are for the desktop template. You DON’T want to replace the mobile template post.body tag. If you watch the video, you’ll see I skip over that one and only replace the next two. So what you’ll need to do is start at the beginning of your template and search for that tag above. Once you find the second and third one, you’ll need to delete both of them and replace them with the code HTML code above.

Remove Extra Read More Link

The code above includes a read more link so that you don’t have to insert one when you write posts. However, if you have been putting a jump link in before using this code, you’ll probably be seeing two read more links now. All you need to do is scroll down a little bit from where you pasted in the snipit code above and find this:

Right above that you should see this:

Just delete that you should be all set =)

For Blogger:

Looking for a way to display images not in your post? You might have noticed if you look on our home page that most of the thumbnail images aren’t actually in the posts themselves. This is very easy to accomplish with WordPress, but Blogger doesn’t have a specific box to set a featured image. There is a trick for it! What you would have to do is put the image that you want as a thumbnail at the very top of your post. Then switch to your html tab and add this inside your image tag:

Here is an example:

That will make it display like a thumbnail but not display in the post =)

Don’t forget to click Save and then you’re done! You now have cool summary posts that save space and load time for your blog =D

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

93 thoughts on “Summary & Excerpt Post Format (Blogger)

  1. Thanks for doing this tutorial!

    The only problem I noticed was an odd white box appearing above the “read more” button…. not sure where that came from. I just copied everything and pasted it where you showed in the video!

    Also I noticed in some posts it looks like the read now button is up a little high covering some text.. is there any way to fix that?

    Thanks again! I love all of your tutorials!

    1. your read more link is up too far because you have position:relative set on your .post-body CSS class. You can try searching for .post-body and removing position:relative;
      Or you can add this CSS if you can’t find it:
      position: static !important;
      The read more link is appearing like that because it has a double border unlike most read more link styling. That’s actually an inline CSS that could be hard to find. We can just override it with this:
      padding: 0 !important;
      p.s. I love that mint color!

  2. Do you have code that allows comments on the post page, but not on the snippet on the homepage? I’d like to have it look clean on the homepage but then obviously have the option for comments on the individual post’s page… :-)

    1. I’m a little confused by your question.. so you just want to remove the comment number link on the home page? To find it you would just search for “post-footer” in your template code. (I think it’s the second instance)

  3. Thank you for this tutorial! I always wondered how people got their posts to show up like this. :D The only question I have is if there’s a way to personalize it? I notice some people have them in boxes or cool divider things that separate them. Unless that’s too advanced for blogger.

  4. Is it possible to set a thumbnail that isn’t the first picture in your post? Like for most of your blog posts, the thumbnail isn’t even show inside the post.

    1. There actually is a trick for that which I just figured out! What you would have to do is put the image that you want as a thumbnail at the very top of your post. Then switch to your html tab and add this to your image tag:
      I edited the post above with an example as well! That will make it display like a thumbnail but not display in the post =)

  5. Is there any way to get rid of the post footer on the snippets? This shows up at the bottom of my post:
    No comments:
    at 6:07 PM
    Labels: cookies, snacks

    and I would like none of that to show up. Just the snippet, Read more link and nothing after.

    Thank you! Your own home page and design is just lovely.

      1. You can! You’ll have to go in to edit your HTML and search for (second instance):

        Before that line of code paste this:

        Then search this:

        Below that you should see

        right after that second div tag, paste this:

        Then save =)

      2. What you would have to do is grab the title code and paste it in-between the image and summary code. The problem is that the code for the summary and image are generated by a script in the HTML. It’s kind of hard to explain but the summary and image code are actually written in the javascript. I’m not sure if you could insert the heading in there or not. It would be complicated. I guess at this time, I’m not sure how that would be done :/

        1. Thank you anyway! Also, I deleted the jumplink stuff and it still jumps to the wrong place when I click “Read More”. I wasn’t having duplicate Read More text before, but I was hoping deleting that would make the Read More button redirect to the beginning of the post. Is there a way to do that?

          1. Maybe try this instead:

  6. My problem is similar to Betsy. How do you rid the nRelate or linkwithin displays to not appear on the home page, but still show on your post page?

  7. Hey Stephanie,

    first of all I wanted to say thanks! I tried it already with so many different codes, but yours is the first one that works (:

    My question is regarding the text next to the thumbnail. Up to now it is centered because this is how I want to have it when you click on the post. Is there a way I can align it left just on the summary?

    Thanks a lot in advance

    1. You can, but it’s kind of complicated. If you go back to where you pasted in the summary html code and scroll up a bit, you should see a h3 which is the heading you want to change.
      It’ll be like

      Before that h3 tag, add this:

      At the end of the h3 tag

      add this:

      Then, copy the text from the beginning of the “if” tag you just added to the end if tag you also added in. Once you have all of that selected and copied, hit enter right below that ending “if” tag and paste(so that you now have two headings with if tags wrapped around them.

      Finally, go back to one of the beginning “if” tags (doesn’t matter which one):

      and change that double equal sign (==) to (!=) exclamation point equal sign. Then save :)

  8. I totally love your tutorials. How did you make your blog follow widget register the number of followers you have because I totally wanna know how you did it!

  9. Hello! thank you for the amazing tutorial, it worked fine!
    I have a couple of questions:

    1. is there a way to put the ShareThis plugin to appear at the end of the post and not on the homepage under each single snipit post?

    2. is there a way to add a little more blank space in between each snipit post?

    Thank you so much in advance <3

  10. hello i’m looking to have summary post but i want to only show the first pictures and the text rather to have the normal summary post of your tuto ( with the little picture on the left) is it possible?

  11. Hi
    I have a question. Can you show me how you have made your Read more button and the post-title next to the thumbnail. I have tried it, nevertheless, it does not work. My English is not so good,but I hope you understand me.

    kind regards from Germany

    1. Hi Sandra, unfortunately with this code, I don’t know a way of getting the post title next to the thumbnail. I’m not even sure it’s possible in Blogger. The read more button can be moved up if you add CSS like this:
      .jump-link {
      position: relative;
      right: 0;
      bottom: 20px;

    1. Ya, it should be pretty easy. In the Javascript, near the bottom, do you see the part where it says: imgtag =
      If you look to the right of that, you should see: margin:0 15px 10px 0;
      Although, looking at your blog, it looks like you tried to change that to: 0 35px 30px 10
      The reason why that isn’t working is because you don’t have the “px” on the end of the 10 there. For margin, you don’t need to have the word “px” on the end of a zero, but all other values must end in px

      Hope that helps :)

  12. hi stephanie,

    I’ve tried your tips and it work! Tq so much. My only problem is i already set 7 post on my home page, but it only appear 2 or 3 post. Can you help it out?


  13. Thankyou so much for this tutorial! It’s been the only one that’s worked for me :) I just wanted to ask, is there any way to leave the first post as full, but then have the rest of posts as post summaries? :) xx

        1. Thank you so much, Stephanie! :D
          It works really great. I tried to find tutorials like that on google but couldn’t find a suitable one. This one works just fine.
          Btw, your tutorial for the post summary is the best! I like that you also took care for the thumbnail and not make it go squished like other tutorials I’ve tried. Thank you so much! :)

  14. Thanks for this I already have thumbnails and snippet but it uses which is limited to 100 characters but I would like to increase it so please provide only post snippet code for me.
    Thanks in Advance.

  15. Hi Stephanie! Thank you SO much for this code, it was extremely helpful and worked really well :) I just have one problem, I’ve made my first post full length and the others snippets, but how do I get the ‘read more’ link on my first post too? Because I had to remove my extra read more link as they doubled, there is no read more link for the first post when I add a jump breaks. I hope that makes sense haha. Thanks so much xx

    The Sunday Chapter

    1. It looks like you’ll have to look for this code:

      Then after the post.body add this:

  16. Hi, first of all, thanks so much for your tutorial. couldnt find any others that help.

    just 1 qn, is it possible to show the summary text with my previous line breaks set when I was blogging, instead of showing it as 1 whole paragraph of words without any line breaks?

    once again, thank u !

  17. I can’t get this to work.

    All the tutorial I read online say

    Look for this line


    What the hell does that mean replace it with? just delete that 1 line of code and paste the whole new code in?

    Well I did that and nothing happened. Do I delete everything under neath that line?
    I know you guys design website everyday but you can’t even write 1 simple instruction.

    And not just you, all top 10 results from google are the same. It seems that everybody copies each other without even reading each other instruction.

    1. I created a video follow along tutorial on YouTube if you’re confused. There is a link for it near the top of this tutorial. It visually shows this step though step. No need to be rude. I’m willing to help and answer questions.

  18. Thankyou so much for this tutorial! I’ve been searching for how to do this for so long.

    Just one questions, is there a way to edit the coding to change the text of read more to a customised image? I’ve done one up but dont want to fiddle with the coding too much to try and do it myself without knowing how to do it properly.

    1. Yep!The read more link is located in this HTML:

      Delete that code and replace it with this:

  19. Thank you so much for this! It was all very clearly explained and it and worked perfectly!

    Now I just really want to change the size of the font in the post summery, would you please be able to help me with that?

  20. Hello there! Thanks for this tutorial, btw. But this doesn’t seem to work properly on my blog.

    I’ve pasted the Javascript properly on the said position, but when I try to do the next step, and try to preview it, this error appears:

    Could not load template preview: Error parsing XML, line 1866, column 3: The element type “b :if” must be terminated by the matching end-tag ““. (I had to put spaces in between the codes here because it might not appear)

    And when I checked where the error is, it goes all the way down to my widgets (/ b: includable) which is so weird because I assume they have nothing to do with this. I put back the original codes and the error disappeared.

    I don’t know what’s wrong, but if you might have a clue and help me out, that would be greatly appreciated, thank you. :)

  21. Hi!
    I think I love you. I also think I’ve implemented most of your HTML and CSS tutorials on my blog. I esspecially love this one but since I apparently use a ton of tags/labels on my posts (I just realized this when I added this one) the home page now loogs kind of cluttered. Is there an if statement that I can add, like with the within widget, to have time, comments and lables NOT show up on the home page?

    Thank you so much for helping newbie coder out!

    1. Oh my, I think.. I think I did it. Wow, you work wonders when you don’t even try. I sorta found my way to your if-statement tutorial and found my way to my template ‘post-footer’ and it actually worked! You’ve taught me a ton and I’m forever grateful!

      Thanks :D

  22. Because you seem to have the best methods and answers (you deserve all the applause!), I have a quick question for you. Is there a way to make the thumbnail images clickable? Right now, users can only click the title or the Read More link, but I would like the thumbnail image to click through to the post as well. Any ideas? Thanks!

    1. I don’t think it’s impossible, but it would be difficult to configure. The problem is that the image and the summary text are created in the javascript together and then spit out to the HTML section. So you can’t just wrap the HTML with a link because then you would also be wrapping the summary text in the link. I think this would take some jQuery and a lot of testing to get that work. In other words, not a simple solution. Sorry, I just don’t really have the time to create this custom code for you.

  23. Thanks a lot friend! You made it simple. I don’t know anything about HTML and JAVA. But your tutorial made me to edit my blog.

  24. Thank you SO MUCH. I’ve been searching for this all night. I had followed a half dozen other tutorials, lost my template several times, albeit my mistake on that… Point is, I was SO FRUSTRATED, and about to give up. I found your site, gave it one more try, and its worked for me! Thank you, thank you, thank you!

    Tina @ Turning Threads

    1. Thank you so much, I’VE been looking for this for several months. Finally found you. thanks a lot Stephanie. Greetings from Santo Domingo
      Still have a question,

      In the summary post, how can i make my image clickeable? Please if you want you may visit my main page., and let me know how to do it

  25. Hi, there!
    I really need a code that instead of getting an image for the post summaries, gets a youtube embedded video. Can anybody help me?

  26. Thank you, this tutorial works with my Blogger template, but how can I make the post snippet text size larger?

    For now, I’ve gone back to using Blogger’s jump link function, which works fine but doesn’t change the image to a thumbnail size on the home page. If I add a thumbnail image with the ‘no display’ code as you suggested, Google+ doesn’t pick up the larger image when the post is shared. Any help is appreciated. Thanks!

    1. To change only the summary text size, you would have to add class=”summarytext” right before expr:id='”summary” in the HTML above. Then add css like

      Sorry, there isn’t a way around how Google+ gets that image in Blogger.

  27. How to put Html tags in Blogger posts description ? for instance showing links in description instead of just text so the user don’t need to enter the post to click any link inside it

    1. I don’t think it’s impossible, but it would be difficult to configure. The problem is that the image and the summary text are created in the javascript together and then spit out to the HTML section. So you can’t just wrap the HTML with a link because then you would also be wrapping the summary text in the link. I think this would take some jQuery and a lot of testing to get that work. In other words, not a simple solution. Sorry, I just don’t really have the time to create this custom code for you.

  28. For some reason, my headers are appearing as part of the body. The h3 “How Do I Improve My Posture” will appear when I click on Read more. Hopefully you are still active. Thanks.

  29. Hi, can you please help me? I got confuse because I didn’t have that 3 post.body tags in my template, and when I tried to search it over and over it appears just only 2 post.body tags.. any help would be very much appreciated.

        1. Hi! It’s me again, can you teach me how to make my post title to be placed beside the image thumbnail instead of putting it above the thumbnail? Thank you =)

          1. Awesome! Glad you got it working :) As for your question, I’m not sure unless I see your site. It might working if you added a float:left; to your post title.

  30. This almost works perfectly! Is there a way of having it only do the cut, not the html removal? I’d love to keep my formatting in the summaries. Thank you for sharing this code!