SHOWING POST EXCERPT WITH THUMBNAIL ON BLOGGER HOMEPAGE

post excerpt for bloggers

Like I’d always say; blogger blog lacks widget/ gadget but they are one of the best any way. With wordpress platform, it is easy to add excerpt with thumbnail to your blogs homepage/ front page but in blogger it is impossible except with some few codes like the one I am about to show you.

When you go to any blog, on the homepage you will only see the post summaries with images and the read more sign, that is what I am talking about. If you’d like to see how excerpt with thumbnail works, click the “Home” above this page or click here or see the image below.

Must Read: ADDING RELATED POST WIDGET WITH THUMBNAIL TO YOUR BLOGGER BLOG

post thumnail with excerpt for blogger blog
A post excerpt with thumbnail

The reason you need this? Every bloggers shows post summery on their blog’s homepage because it helps reduces bounce rate, so why can’t you do the same with your blogger blog? With this tutorial, you’re going to know the simple trick on how to implement it on your blog.

So shall we proceed?

HOW TO SHOW POST EXCERPT WITH THUMBNAIL ON BLOGGER BLOG

Must Read: HOW TO CREATE A 3 COLUMN WIDGET IN YOUR BLOGGER FOOTER

Please before playing with any codes it is best to do a backup in case you mess up you codes.

First things first, go to your blogger dashboard >>> Click Template >>> Click Edit HTML to proceed to your main template code.

Are you there? Now search for the below code

[php]<data:post.body/>[/php]

Note: To make the search easy, simultaneously press the ctrl + f to bring out a search box below your browser.

Have you seen the above code? If you have, replace the code with the below one

[php]<b:if cond=’data:blog.pageType != &quot;item&quot;’>

<b:if cond=’data:blog.pageType != &quot;static_page&quot;’>

<div>

<b:if cond=’data:post.thumbnailUrl’>

<img class=’post-thumbnail’ expr:alt=’data:post.title’ expr:src=’data:post.thumbnailUrl’ width=’72px’ height=’72px’/>

</b:if>

<data:post.snippet/>

</div>

<div class=’jump-link’>

<a expr:href=’data:post.url’ expr:title=’data:post.title’><data:post.jumpText/></a>

</div>

<b:else/>

<data:post.body/>

</b:if>

<b:else/>

<data:post.body/>

</b:if>[/php]

Have you done that? Now save your work and you are done

Note:

If you want the thumbnail to appear on the left, search for

[php] ]]></b:skin>[/php]

Have you seen it? Now paste the below code above it

[php].post-thumbnail{float:left;margin-right:20px}[/php]

And if you want the thumbnail to appear on the right, change the “left” on the code to “right” so it should look just like this

[php].post-thumbnail{float:right;margin-left:20px}[/php]

Save your work and you’re done.

Now tell me how simple is that? Really simple right! In case you bump into trouble on the way, do not forget to say it by using the comment box below. You can also post your comments and thoughts using the comment box below. Remember that your comments and thought are valuable to us

Do you like the tutorial? Then why not like us, share us and recommend us with friends!

Do not forget to subscribe to our feed for your latest blog updates.

Similar Posts

37 Comments

  1. very helpful article thanks for sharing
    how can i add a reccomended slider like yours on my blog
    thanks in advance

  2. Hi Babanature
    I need your help!
    I’ve been trying with various tuts to get the excerpts and thumbnails on my blogger blog but nothing works!!!

    I found 3 and was replacing the first one. Then I read on a comment here that is the third I should replace. I did so but still it didn’t work. Any idea why nothing is working? I really want this look for my blog but can’t get it.

    Can you please help me?

    Thanks a lot!!!

    1. Hello Majobv,
      Don’t worry, everything will be perfectly done. this is what you will do, locate this tags
      < divclass='post-body entry-content' expr:id='"post-body-" + data:post.id'>
      < data : post.body/>

      Have you seen it? now replace the with the code. If you are still having problem with it let me know and i’ll do a video for you.

      1. Hi Babanature,
        thank you so much for your quick reply. I’ve found 3 tags similar to the ones you’ve written, but they all have something after data:post.id… which one of these 3 should I replace?

        Thank you!

  3. Curious on how to increase the characters for the post excerpts? Thank you so much for the code, it worked perfectly on a site I am designing.

    Also, I added replaced the 2nd and it worked great.

    1. Hello Angie,
      Do you mean to increase the word count? if yes! the code does not have a spot for that. I’d probably drop a post on that. Thanks for the comment Angie 🙂 Do have a nice weekend…

          1. Well I just noticed your example is from a WordPress site which is kind of misleading because my post excerpt is probably less than 120 characters which looks funny.

          2. Ahhh… that image is from this blog. i would have add a blogger blog but i just needed a more flashy image 🙂
            I just checked your blog out and discovered nothing. which of the blog you use it on? let me take a look!

    1. Ok, i have seen it and i will come up with a new post on this by next weekend. If i had to paste codes here in the comment box for you, it will not show up, so Do be around to see it next weekend.

      1. Thank you. I would just like to be able to have control of how many characters appear or have more than what is shown.

  4. i did has u instructed and it was saved. but i didn’t see any changes. pls what else do i need to do. thanks for your responce

      1. i located every bit as instructed, but all to no avail. just put me through. i’m a regular reader of your blog. thanks

  5. Hello babanature, found your tutorial very useful! thanks for sharing
    Nevertheless I’m still having the problem with the length of the excerpt…anything on that? would appreciate you drop me a line if you find any solution 🙂

    Thanks!

  6. Hi Babanature,
    I have accidentally deleted the html code connected to the thumbnails on the post excerpts on the homepage. Only the post titles will appear but not the generated thumbnails. Any idea how to get them back?
    Tried everything out but nothing works. Thanks

    1. Hello Dirk,
      Normally before editing your HTML codes you must first do a backup in case any problems arises. Now the only way you can get it back is to re-install the template, that should work perfectly.

  7. dear i need one help i try to customize snippet in my blog design but i not able to do it. i changed the height of the content box but the length of the post is remaining same. can you please tell me how to do this. i am not aware of javascript but i like to do it. thanks in advance, and kind request if you can mail me in this that’s will be fine.

  8. Hey babanature. code worked for me, but i only get about 100 characters or so and it’s out of alignment. Tried the align left/right but summary seems out of wack.

    would appreciate the help. Thanks in advance

Leave a Reply

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