How to Hide Article Images Into Thumbnails

Hiding Article Images Into Thumbnails

ignielkom - This time ignielkom will share how to hide post images into very cool thumbnails.

Regarding postings on blogs, an image is certainly very necessary, to simply give the curiosity of visitors. Actually I always publish posts with 1 image above the post to be a thumbnail.
I hope that the display on the home page will be more attractive with pictures. But after I wrote a few articles, after a while I felt that the picture above the post actually made my article look ugly and not pleasant to look at.
Even though a good article is an article that is able to make the reader feel comfortable in reading. So I think images don't really have an important role in an article, but if I don't give images at all in my articles, then display.
After that I decided to make a thumbnail image , so the thumbnail image or photo that I created will only appear on the homepage or you could say it won't appear in the article.

How to Make Thumbnails or Images That Only Show on the Homepage

Login or login to blogger you
Choose a Template/Theme
Edit html
Search code
Paste the code below above the code

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
.thumbnail {display:none}
</style>
</b:if>

When finished, please save your template.

Next we create a post and upload an image file for us to make the article thumbnail.

Steps to make a thumbnail image that doesn't appear in the article

After finishing uploading, we change the writing mode from "compose" to "HTML" which is located in the upper left corner.

In HTML writing mode, the code will appear as below:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWkzavH7ZwPrupPpJ9uxH0CNTtgDNpd0BNrg4CBT6UjqkeseT4UlAPJOd3u_XSTq6JEHLxAUYOuY2V7Q_fcYl53xmlL8wYiLfEJHxwb0SKcD6gfU1gEQUQgz3d55kyEtJwd4POoYzlN-a7/s1600/Bandwidth.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="284" data-original-width="691" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWkzavH7ZwPrupPpJ9uxH0CNTtgDNpd0BNrg4CBT6UjqkeseT4UlAPJOd3u_XSTq6JEHLxAUYOuY2V7Q_fcYl53xmlL8wYiLfEJHxwb0SKcD6gfU1gEQUQgz3d55kyEtJwd4POoYzlN-a7/s320/Bandwidth.jpg" width="320" /></a></div>
<br />

Change the "separator" to "thumbnail" (focus on the red text), until it becomes like this.

<div class="thumbail" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWkzavH7ZwPrupPpJ9uxH0CNTtgDNpd0BNrg4CBT6UjqkeseT4UlAPJOd3u_XSTq6JEHLxAUYOuY2V7Q_fcYl53xmlL8wYiLfEJHxwb0SKcD6gfU1gEQUQgz3d55kyEtJwd4POoYzlN-a7/s1600/Bandwidth.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="284" data-original-width="691" height="131" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWkzavH7ZwPrupPpJ9uxH0CNTtgDNpd0BNrg4CBT6UjqkeseT4UlAPJOd3u_XSTq6JEHLxAUYOuY2V7Q_fcYl53xmlL8wYiLfEJHxwb0SKcD6gfU1gEQUQgz3d55kyEtJwd4POoYzlN-a7/s320/Bandwidth.jpg" width="320" /></a></div>
<br />

By changing separator to thumbnailthen the image will automatically turn into a thumbnail and not visible in your article if published.