in

Display Automatic Post Thumbnail Images On Blogger’s Blog Homepage Without Javascript

With a little tweak in your Blogger blog’s html, you can easily display automatic thumbnails in post summaries on your blog’s homepage when viewed on PC (desktop view). No need for any javascript nor complex css customization.

The tweak will enable the display of thumbnails automatically generated from images used in your posts on your homepage, while the full-sized images display on post pages.

Post Thumbnails will make your blog look fine if you are using the Blogger Jump break feature to add “read more..” option to your blog posts. Below is a screenshot of a post excerpt on my blog with a post thumbnail aligned to the right and also with a “read more” icon.

How To Add Post Thumbnails To Blogger Homepage

==> Log in to www.blogger.com
==> Back up your blog template
==> Go to “Template” > “Customize” > “Advanced” > “Add CSS
==> Copy and paste the code below in the css window:

 .postthumb {
padding: 5px;
float:left;
border: 1px solid #eeeeee;
-moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

==> Click “Apply to Blog
==> Click “Back to Blogger
==> Go to “Template” > “Edit HTML
==> Click inside the HTML editor

==> Use CTRL F to find the second <data:post.body/>  in your blog’s HTML

==> Copy the code below, directly above the second <data:post.body/>

<b:if cond=’data:blog.pageType == “index”‘>
<b:if cond=’data:post.thumbnailUrl’>
<img class=”postthumb” expr:src =”data:post.thumbnailUrl” expr:alt=”data:post.title”/>
</b:if>
</b:if>

==> Save your template

==> View the homepage of your blog and you should see the post thumbnails appearing on each post excerpt.

NOTE: There must be an image in your post and you must have added the read more option to your post.

I hope it works for you.

Please Share :

Receive Alerts In Your Email Inbox

Enter Your Email Address Below To Receive Latest Updates via Inbox, Free of Charge!

What do you think?

93 Points
Upvote Downvote

Written by Jide Ogunsanya

Pro Nigerian Blogger, Digital Marketer and Web designer. I help business owners to grow their businesses online. You can join my Facebook Group here or join my Telegram Group here.

Comments are closed.

26 Comments

  1. Bro you would have captured the way it is on you blog, the image you uploaded above is not enough indication on how it is going to look when this code is inserted. What i saw in the image above is just a post which you have written before now. A demo view would have been better for better understanding. Nice post though

  2. Hi Jide,Great post here..Please i need your insight on this.I deposited my very first Adsense check into my Gtb Domiciliary Account more than 3 weeks ago.Please how do i know the funds have been credited to my Dorm Account? Will they(GTB) send me an alert as is the norm with my other accounts or how do i know the Check have been cleared and payment lodged into my account.secondly, Can How do i withdraw the money from my Domiciliary Account? Thanks and God Bless you for speedy response..

    NB: I would have visited the Bank for these Details but i am just recovering from a surgical Operation…

  3. Hello Jide, the second code did not work for me. It gave an error message “Error parsing XML, line 3599, column 16: Open quote is expected for attribute “cond” associated with an element type “b:if”. Please how do i correct this?

Larrie Peniel: Nigerian Master of Ceremonies that Redefines Event Anchoring / Compering

Mobstac: How To Switch from Pro to Starter Plan