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.
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.
Very well written article bro! I will mus try it.
ReplyDeleteThanks for sharing :)
How about putting featured post with thumbnails on the homepage?
ReplyDeleteYes, that tutorial is under progress.
DeleteUse the rel="image_src" in the homepage
DeleteYou win! Everything else I read said it couldn't be done. THANK YOU!
ReplyDeleteWe're glad it worked for you :) Cheers!
Deletebut where is Blogger post Editor?
ReplyDeleteBlogger >> Add new Post
ReplyDeleteplease, 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
ReplyDeletehttp://yisyou.blogspot.gr/
Read this tutorial
Deletehttp://www.mybloggerlab.com/2013/05/how-to-add-facebook-open-graph-meta-data-in-blogger.html
Thanks ... that did the job :)
ReplyDeleteWow. 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.
ReplyDeleteThis 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?
ReplyDeleteHad I only known it was this simple... Thank you so much!
ReplyDeleteYou're welcome, Do share our blog with your friends.
Deletewow...how did you merge your blogger comments with google+ comments?
ReplyDeletenice work BTW.
Here's the tutorial
Deletehttp://www.mybloggerlab.com/2013/04/how-to-use-blogger-and-google-comments-together.html
Thank you
This worked perfectly,thank you!
ReplyDeleteThank 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! :)
ReplyDeleteThank you!
ReplyDeleteI'd like to add a image, and just to clarify what I'm looking for:
ReplyDeleteWhen 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.
Thanks. But it's not working 100%. Featured pictures got hidden too.
ReplyDeleteIt only works with the sites that are using Auto Thumbnail on their Archive and Home pages.
Deletethis is not functioning to me
ReplyDeleteuseful article for me .thank u for sharing this...
ReplyDeleteworking bro thanks alot
ReplyDeleteIt worked the first time I tried it. Great piece. Thanks soo much
ReplyDeleteI am Glad, it worked for you.
Deletedoes it work on simple template on blogger?
ReplyDeleteWhen 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....
ReplyDeleteCan i link the feature image to an external blog via my blog
ReplyDeleteThank's a lot. This is help full.
ReplyDelete