How to Display Custom Thumbnails in Blogger

A Thumbnail can briefly be called a small image or a preview image. Thumbnails on blogs and YouTube can be used to explain what content will be presented and discussed. If you are confused about how to create your own thumbnail, try How to Create a Simple Blog Thumbnail with Gimp

How Blogger Thumbnails Work

Thumbnails in Blogger are taken from the images you upload in your posts. If there is more than one image in a post, the image at the top will be taken as the Thumbnail. So if you want to display a specific image as a thumbnail, place it at the very top.

Blogger thumbnails appear in the FeaturedPost, Blog, and Popular Post widgets. If your template supports related posts with thumbnails, they will also appear there, as well as on social media.

Advantages of Custom Thumbnails

Custom thumbnails here mean hiding the thumbnail image from the post, so the thumbnail on the blog post page is not visible. By hiding the image, your post will look neater.

Hiding Thumbnails from Posts

There are various ways to hide thumbnails from the post page. Here are the methods I know. But before using any of the methods below, make sure you have uploaded the image to your post.

1. With Style

By adding the display:none class, the thumbnail will not be displayed. However, this method is highly not recommended because it will affect your post’s SEO score.

The method is to add the following code to the img tag of the thumbnail image you want to hide from the post.

style="display:none"

Example of code implementation:

<img src="https://blog.google.com/image1200x600.webp" style="display:none" />

Please remember that this method is highly not recommended. Please read the next section.

2. With Javascript

The second method is by adding JavaScript to the template. This method can still be used but is a bit complicated, meaning it’s not very user-friendly for readers and writers. However, if you want to know, here’s how.

Apply this JavaScript code to your blog right above the </body> tag.

<script>document.querySelector('.post-body').querySelector('.separator').firstElementChild.remove()</script>

Then, every post will have the first image removed, provided that each image is wrapped in <div class="separator">. However, it’s less flexible if you don’t want to hide thumbnails from posts, and it often loads late if the internet speed is slow, and the image appears first before being removed.

3. Add Comment Code

This method is what I highly recommend and like the most because it is very flexible, and Google reads it as an HTML comment, so it doesn’t affect the SEO score. If you don’t know the HTML comment tag, here’s the code.

<!-- -->

To apply the comment code to the thumbnail image so it doesn’t appear, you need to go to the HTML view when editing the post. If you don’t know how, please watch the video below.

Now add <-- at the beginning of <div class="separator"> (if it’s not there, then at the <img tag) and end with --> at the end of the </div> code. See the following image.

Here’s an example of the complete code:

<!--<div class="separator" style="clear: both;"><a href="https://1.bp.blogspot.com/-J1VWyX2zzts/X0-fWT0m_hI/AAAAAAAAF5s/CpR7UUcOzRou067x442Ic_lglu6LtJ62gCLcBGAsYHQ/s0/hide-thumbnail.png" style="display: block; padding: 1em 0; text-align: none;"><img alt="" border="0" data-original-height="600" data-original-width="1200" src="https://1.bp.blogspot.com/-J1VWyX2zzts/X0-fWT0m_hI/AAAAAAAAF5s/CpR7UUcOzRou067x442Ic_lglu6LtJ62gCLcBGAsYHQ/s0/hide-thumbnail.png"/></a></div>-->

Final Words

How about it? The third method is my favorite. Besides being flexible and easy, this method does not affect the SEO score. If you still don’t understand, you can ask in the comments section.