How to create post thumbnails in blogger

In blogger, all posts are shown in list form and no option is there to change the post display form. Here , we provide some steps to create post thumbnails in blogger to make your blog effective. Let’s start..! .

Steps to post thumbnails in blogger:

1. First, Log In your blogger account.
2.Go to page section and create page with relevant name.
3. After that go to theme section and then customize option.
4. Click on Advance under the customize option. Here, you will see list option.
5. Click on Add CSS . A window will be appear then you have to copy following code and then paste there and save the code.

.thumbnail
{
width:250px;
height:300px;
box-shadow:5px 5px 5px grey;
padding:15px;
float: left;
margin-top:5px;
margin-left:5px;
}
.img
{
width:180px;
height:180px;
padding:10px;
position: relative;
left:22px;
float: left;
}

#thumb-text
{
line-height:40px;
display: inline-block;
text-align: center;
font-face: arial;
}

6. Go to Pages section and open that page which you create recently.
7. Go to HTML section in that page and paste following code. Remember that before pasting the code you have to put your post image url and post url.

<div class=”thumbnail”>
<img class=”img” src=”YOUR IMAGE URL” />
<br />
<h3 id=”thumb-text”>
<a href=”YOUR POST URL”>YOUR POST TITLE</a></h3>
</div>

8.After that you can publish your page.
Your page will show thumbnail of your post.

Verified Technical Author

Written by Techniq World

Technology specialist and technical writer at Techniq World, covering modern software, operating systems, and developer tools.