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 :

Like What You Read?

Sign Up to get similar articles delivered to your email inbox.

Leave a Reply

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

26 responses to “Display Automatic Post Thumbnail Images On Blogger’s Blog Homepage Without Javascript”

  1. James Avatar
    James

    I will try it once I get on PC. Thx Jide

    1. Jide Oguns Avatar

      Ok James. No prob

  2. Akuneme Christopher Avatar

    Timely tips. Thanks for sharing

    1. Jide Oguns Avatar

      You're welcome

  3. Godwin Odey Avatar

    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

    1. Jide Oguns Avatar

      I don't understand you. The screenshot is enough to let you know what post summary thumbnail is.

  4. rotimi Armstrong Avatar

    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…

    1. Jide Oguns Avatar

      If you've activated SMS/Email alerts on your dorm account, you will receive the alert. From the payments page of your Adsense account, you can know when it clears. To withdraw, go to the bank, pick up and fill the dorm account withdrawal slip.

  5. Adebayo Ariyo Avatar

    Is this code working for anyone? This is the error response i keep

    getting "Invalid variable declaration in page skin: Variable name

    must not be declared twice. Input: textcolor".

    1. Jide Oguns Avatar

      If you follow the steps carefully, you won't get any error. Are you using a third party template?

  6. Adebayo Ariyo Avatar

    Yea, am using a third party template and I already have the "read

    more" hack. I just like it to look a lot neater.

    1. Jide Oguns Avatar

      Some customization in your third party template might be causing the problem. You might need to reset the post widget.

  7. ManchesterUnitedStuff Avatar

    am new to blogging, when ever I post my news to my facebook and someone clicks on it facebook pop up a msg saying the site is a scam….plz how can I correct this.thank

    1. Jide Oguns Avatar

      scam or spam? Mail me bro..

  8. Olasunkanmi Fakeye Avatar

    This will be of help to bloggers using default templates but customized template like the one am using on openinformations blog automatically pic the first picture used in my posts as tumbnail on homepage.

    1. Jide Oguns Avatar

      Yeah, some third-party templates were coded to work like that.

  9. princeohue hacky Avatar

    hello jide how are you today i want to appreciate you for your post on this i have tried this but sir my background is dark and i can read my post see it http://www.nairamind.com

    1. Jide Oguns Avatar

      I am not seeing any dark background on your blog bro.

  10. Daniel chinaza Avatar

    Thanks for the tip but the image did not appear on the right hand side like yours instead it was appearing on the left. Please how do i fix this

    1. Jide Oguns Avatar

      In the first code, change the "float" from left to right.

  11. toby allen Avatar

    Thanks, it worked fine for my blog, Inforisticblog

  12. Alfred Dennis Avatar

    please jide, hw can i fix my blog posts showing twice?? both on homepage and individual post view.
    pls help me.

  13. Topkeh The Guy Avatar
    Topkeh The Guy

    How can I set a default on myself i.e the image that will automatically show if no image(s) is added to my post?

    1. jidetheblogger Avatar

      I only know how to do such on WordPress

  14. Topkeh The Guy Avatar
    Topkeh The Guy

    Please, how can I set it for a template like that of Entclass… that shows no post summary on mobile version…

  15. John Iroeg bu Avatar
    John Iroeg bu

    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?

Search

Copyright © 2025 | About | Advertise | Privacy Policy | Proudly powered by WordPress