Thursday 26 April 2018

Set any thumbnail for the blogger blog post


While comparing WordPress and Blogger, the one down-point of Blogger is that there is no feature to set or choose any picture that you want as thumbnail of the post.Today, we are going to see how we can choose the random picture as thumbnail for the blog post.

To do this, first we need to understand that to which picture the Blogger makes as its first photo!It has been noticed that Google Blogger always takes the first picture in the article as its thumbnail.

So, the solution is to make a beautiful thumbnail and always add it as the first thumbnail of the post.

But, what if you don't want to put it as the first image?For that, there is a little hack!Let me show you that.


  • First, after writing the whole post, add  the thumbnail image at the top of the post like in the below image.
    Adding photos in Google Blogger.
Adding photos in Google Blogger blog post.

After adding thumbnail at the top of the post, it will look something like this.
Editing in blogger.
Now, Switch to HTML tab from compose tab as shown below.
Switch to HTML from compose in Google Blogger.
After that, you'll find the <img> tag.If you know HTML, you will understand this better.
Editing HTML of blog post.

Now, we need to hide the image using attribute style='display:none'.So, add it after '<img '.Then it will look something like this.
Adding style attribute in HTML.

BOOM!That's it! Now publish the post and you will notice that the
 thumbnail is Not visible in the post but is visible in the Home where all the articles are being shown,You will also com to know that while sharing the links on social media, such as Facebook, thumbnail is being shown.

If you preview this, then it will won't work.This trick will work only after publishing the article.This will not work if you did any mistake in between.There should be space left in front and back of the 'style='display:none''.If you have any problem, comment down below.I'l surely reply.

If you want demo, then check in this article itself.You won't find any thumbnail included in this post, but when you look it from the home, then it will appear.

Thanks for reading this post.If you liked it then give a like us on Facebook.

17 comments:

  1. You are officially my favorite person, thank you thank you thank you! You saved me hours and hours of trying eveything I so far knew that just didn't work! Thanks again <3

    ReplyDelete
  2. Do you know what to do if I want to reverse to happen ? I want it to show up in my post, but not in the thumbnail.

    ReplyDelete
    Replies
    1. Yeah, Put the random picture at the topmost of the page which will be thumbnail and hide it using "style=display:none".
      Then the next pictures after that will not come in thumbnails but will be in post.

      Delete
  3. How can I use the Link List widget and make it so thumbnails are shown with post titles? I have created a list of 10 different posts using this widget but there are no thumbnails, there are only post titles. Thank you.

    ReplyDelete
  4. If I'm not wrong, the widget is itself made to put on the links. Maybe you should check for other widgets.

    ReplyDelete
    Replies
    1. Thank you for your reply. Which widget should I use to make a list of posts with their thumbnails showing? I cannot find any on blogger. Thank you again.

      Delete
  5. Can you please answer. First thank You for this post. Second-I add this text after <img, leave space before and after but what happens it that I don't see photo in post anymore, not even in home page. What am I doing wrong? Thank You!

    ReplyDelete
    Replies
    1. Hello,

      When you set "style='display:none'" the image won't be appeared in your post but it is visible in home page only if image it put at very top(first image) of the page.

      Delete
  6. Unfortunately, this did not work for me. I believe I followed your instructions to a "t" and still seeing a blurry mess instead of the thumbnail I inserted (as an image) in the first post.

    ReplyDelete
    Replies
    1. Make sure your image is not too small and also, if you are using any custom theme - this might be a problem also.

      Delete
  7. Great Post! The choice of languages as well as frameworks is determined by the tasks they’re performing and the platforms they’re using. Robtechworld is a great Web Designer In Chandigarh.

    ReplyDelete
  8. My html says imageanchor=“1”. Do I enter it after that? Thanks.

    ReplyDelete

Comment something useful and creative :)