February 19, 2014

How to Add Featured Images or Thumbnails in Blogger

Featured images better known as post thumbnails are a popular feature that every blogger adores to have in his Blogger Template. Today most of the quality Blogger templates support custom post thumbnails functionality. Some popular Blogger development websites like Templateism and Themeforest have some standards of keeping this feature must. However, some new developers as well as users don’t have any idea how to setup a feature image or post thumbnail in Blogger. Therefore, in this article, we will be providing a method to successfully display a feature image thumbnail in blogger.

You may have notice that all most the majority of the blogger templates takes the first image from a post and displays it as a feature post thumbnail on homepage and archive pages. Sometimes users want to have an ability to customize those Featured Images or Post Thumbnails in Blogger.  Mostly themes have a built-in summery feature that does the most the job pretty much accurately but it doesn’t let you set up a feature image or post thumbnail of your choice. Even if you are able to setup a feature image it does not gives same efficient results that WordPress blog does.

Beginners Guide to Feature Post thumbnail in Blogger:

Before getting started with the tutorial, I would recommend you to setup automatic post summery script for blogger so that you can easily setup a feature image through a minor tweak that we will be discussing below.

To add a feature image in blogger posts, simply go to Blogger ›› New Posts  ›› and click "Upload Image" button which will open up a image uploading wizard. You can use that to upload any image from your computer or you can also add an existing image from your Picasa image library.


After uploading the image select “Edit HTML” tab from the top left corner and copy the complete URL of the image which would somewhat look like as it can be seen below:


https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQXI09_Gi5mvUaEegG5mrRkgXnxKS-G1Giay3Y2j9FcrLM1enFy9PcnB8D8O4GiPscUlFTYLlot7Ba-hFMvyf5q9-nDc1AM5hgPA5E_pxxRsRiW8_JhUhtqKeqzYFOD8mdGeQC59QKRnww/s1600/Picasa-Images.png

People want an ability to display feature image or post thumbnail only on achieve and homepage that appears along with the post except (summery). They don’t want to have the feature image to be shown on the same post when viewer opted to view it. Now to make it possible, paste the following piece of coding at the very top of the “Blogger post Editor” through “Edit HTML” tab. Remember: Do not forget to replace the image-here with the URL of your image that you would like to show as feature image or post thumbnail.

<img src="image-here" style="display:none;">

Once everything is done, publish your post by pressing "Publish" button. We hope this article have helped you in learning the technique to add feature image or post thumbnail in Blogger. if you have any questions or problems regarding this topic, please do not hesitate to leave your suggestions below in the comments. 

32 comments:

  1. Very well written article bro! I will mus try it.
    Thanks for sharing :)

    ReplyDelete
  2. How about putting featured post with thumbnails on the homepage?

    ReplyDelete
  3. You win! Everything else I read said it couldn't be done. THANK YOU!

    ReplyDelete
  4. but where is Blogger post Editor?

    ReplyDelete
  5. please, can you tell me how to put a thumbnail to show when i share a link of one of my posts? For example, when i post one article on facebook, the only image that appears is my main screen page. Watch for example
    http://yisyou.blogspot.gr/

    ReplyDelete
    Replies
    1. Read this tutorial

      http://www.mybloggerlab.com/2013/05/how-to-add-facebook-open-graph-meta-data-in-blogger.html

      Delete
  6. Wow. So simple and effective. Kudos. Made this change to the top of my post and the Blogger Post List API now returns that image URL.

    ReplyDelete
  7. This worked perfectly,thank you! Is there a way to enable this code to go into every post automatically? Basically I want the second image in every post to be the feature thumbnail?

    ReplyDelete
  8. Had I only known it was this simple... Thank you so much!

    ReplyDelete
    Replies
    1. You're welcome, Do share our blog with your friends.

      Delete
  9. wow...how did you merge your blogger comments with google+ comments?
    nice work BTW.

    ReplyDelete
    Replies
    1. Here's the tutorial

      http://www.mybloggerlab.com/2013/04/how-to-use-blogger-and-google-comments-together.html

      Thank you

      Delete
  10. This worked perfectly,thank you!

    ReplyDelete
  11. Thank you, this worked for me, in that, when posting the link (within facebook), it makes the right arrow appear indicating choices and I was able to pick the photo I wanted to appear in the thumbnail. Great help! :)

    ReplyDelete
  12. I'd like to add a image, and just to clarify what I'm looking for:
    When writing my blog's url in a message or post, there is a image that appears in messenger (a wrench) and no image in Whatsapp for example. I know that when I write Whether.com in Whatsapp a image does appear. Which meta tag do I add to have that on my blog?
    Thanks.

    ReplyDelete
  13. Thanks. But it's not working 100%. Featured pictures got hidden too.

    ReplyDelete
    Replies
    1. It only works with the sites that are using Auto Thumbnail on their Archive and Home pages.

      Delete
  14. this is not functioning to me

    ReplyDelete
  15. useful article for me .thank u for sharing this...

    ReplyDelete
  16. It worked the first time I tried it. Great piece. Thanks soo much

    ReplyDelete
  17. does it work on simple template on blogger?

    ReplyDelete
  18. When sharing one of my blog posts on twitter, the image that I've uploaded never appears in the tweet. How do I make it so that the 1st image that I upload into the body of the blog post will appear? I'm looking for something like the "Featured Image" function in Wordpress....

    ReplyDelete
  19. Can i link the feature image to an external blog via my blog

    ReplyDelete
  20. Thank's a lot. This is help full.

    ReplyDelete

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.