How to Display Custom Thumbnails on Blogger

Nilesh    9/10/2020    Blogger Trick   

Thumbnails can briefly be referred to as thumbnails or preview images. Thumbnails on blogs and youtube can be used to explain what content will be presented and discussed. If you are confused about not being able to make your own thumbnails, try How to Make Simple Blog Thumbnails with Gimp

How Blogger Thumbnails Work

The thumbnail on blogger is taken from the image that you put in the post. If there is more than one image in the post, the image with the top order will be taken as a thumbnail. So if you want to display a thumbnail with an image aimed at it then put it at the top.
The blogger thumbnail appears in the FeaturedPost, Blog and Popular Post widgets. If the template you are using supports related posts with thumbnails, it will also appear there, besides that it will also appear on social media.

Pros of Custom Thumbnails

The custom thumbnail meant here is to hide the thumbnail image of the post, so that the thumbnail on the blog post page is not visible.

The good news is that blog posts will look neater.

Hide Thumbnails from Posts

There are various ways you can do to hide thumbnails from the posting page, here are the ways that I know. But before using one of the methods below, make sure you have uploaded an image in your post.

1. With Style

By adding a class display:none, the thumbnail will not appear, but this method is not recommended because it will affect the seo score of your post.
The trick is to add the following code to imgthe thumbnail image that you want to hide from the post.

style="display:none"

Example of implementing code.

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

Keep in mind that this method is not recommended, please read the next section.

2. With Javascript

The second way is by adding javascript to the template, this one method can still be used but it is a bit complicated, aka not friendly to readers and writers. However, if you want to know, here's how.

Apply this javascript code on the blog just above the code </body>.

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

Then each image will be deleted in the first order with the condition that each image is wrapped <div class="separator">. But it is less flexible if you don't want to hide thumbnails from posts, and are often deleted late if the internet speed is slow and instead often appear first and then deleted.

3. Add Comment Code

I highly recommend this one method and I like it the most, because it is very flexible and Google also reads it as a comment from html so it doesn't affect the seo score. If you don't know the html comment tag here is the code.

<!-- -->

To apply the comment code to the thumbnail image so that it doesn't appear, you must enter the html view when editing the post. If you don't know how, please see the video below.

Now you add it <--at the start of <div class="separator">if it doesn't exist then to the code <imgand end it -->at the end of the code </div>. See the following picture.

An example of the complete code follows

<!--<div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNefMui_OHhmSxxZ3ySa0R1yrirYZH_sxoMVJXEbD238awj9Pyq0Ieu2XGH6h91l0knrBt_3JHlNLt7wKHNhgEDLIM35RpevkrL8bagSEN-zb1Rln45kQNahvb0BusTMnuX4lQ9DfbwFVP/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNefMui_OHhmSxxZ3ySa0R1yrirYZH_sxoMVJXEbD238awj9Pyq0Ieu2XGH6h91l0knrBt_3JHlNLt7wKHNhgEDLIM35RpevkrL8bagSEN-zb1Rln45kQNahvb0BusTMnuX4lQ9DfbwFVP/s0/hide-thumbnail.png"/></a></div>-->

The final word

How? The third method is what I like the most, besides being flexible, it's also easy, it doesn't affect the SEO score. If you still don't understand, ask in the comments column.