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

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

<data:post.body/>

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

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

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

 ]]></b:skin>

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

.post-thumbnail{float:left;margin-right:20px}

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

.post-thumbnail{float:right;margin-left:20px}

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.