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
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
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 != "item"’>
<b:if cond=’data:blog.pageType != "static_page"’>
<img class=’post-thumbnail’ expr:alt=’data:post.title’ expr:src=’data:post.thumbnailUrl’ width=’72px’ height=’72px’/>
<a expr:href=’data:post.url’ expr:title=’data:post.title’><data:post.jumpText/></a>
Have you done that? Now save your work and you are done
If you want the thumbnail to appear on the left, search for
Have you seen it? Now paste the below code above it
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
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.
37 thoughts on “SHOWING POST EXCERPT WITH THUMBNAIL ON BLOGGER HOMEPAGE”
very helpful article thanks for sharing
how can i add a reccomended slider like yours on my blog
thanks in advance
I’m using a plugin called “Simplereach slide” it’s good and does not take up cpu usage.
I have 3 code same like this: <data:post.body/>
which 1 I should choose??
you should replace the third code.
this is a wonderful and indeed a very informative post. thanks for the info
glad you liked it.
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!!!
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.
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?
Hello once again,
yes! one of the code doesn’t have anything after the id tag which is the code i pasted. So locate it.
this is my first time on your blog and I found this blog so useful,thnx admin.
yea! you can explore more to discover new things more and make here a home. thanks for liking onenaijablog and do have a lovely week ahead
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.
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…
Yes that is exactly what I am talking about. So it is not possible?
I don’t think that is possible with this code. because naturally, blogger blog don’t put a panel on that.
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.
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!
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.
Thank you. I would just like to be able to have control of how many characters appear or have more than what is shown.
Ok amma try and get that for your…
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
It did not work for you because you did not implemented it as instructed…
i located every bit as instructed, but all to no avail. just put me through. i’m a regular reader of your blog. thanks
The post have already said it all, now try to read the comments and see if you’ll find any remedy…
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 🙂
I have a new post on this that addresses that issue. you can check it out…
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
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.
Can’t get it to work at all 🙁
I seriously don’t understand. Which of the snippet are you trying to customize?
how do you make the thumbnail clickable? And not with the ‘<a href= … – code' 🙂
Thanks dude, we’ll try this trick on my blog..
waw! you are a life saver! i must say the way you clearly point out your words really helped me a lot. i was able to fix thumbnail issue.
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