Last Updated on January 17, 2024 by Justin Su
The default size of the thumbnails of the website is not loved by everyone. So if you are one of them then you should follow the below methods to change it.
Some Blogspot website looks vague with default blog thumbnails and this is the reason why people change their theme because they don’t know that they can make it look good by changing blog thumbnail size.
The default blogger thumbnail size is 72x72px.
In this guide article, I will show you have to change the size of the thumbnail and images, in the popular post widget and others.
How to Change Thumbnail Size for the Popular Posts Widget without JavaScript
Follow the below steps.
- Log in to Blogger
- Go to Theme
- Click on EDIT HTML (next to the customize button)
- Click on the Jump To Widget logo & click on PopularPosts1
- Search for the following codes
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts' visible='true'>
<b:includable id='main'>
...
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>
</b:with>
...
</b:includable>
</b:widget>- Just change the numbers of width and height
- Click on save
Also Read: How To Make Money From Blogging
OR
Copy and paste the below code to your Header
<script type="text/javascript">
$(document).ready(function() {$('.PopularPosts img').attr('width', '100%').attr('height', 'auto').attr('src', function(i, src) {return src.replace( 's72-c', 's120-c' );});});
<!-- helparchive.blogspot.com -->
</script>Change the number according to your needs. If the current value is “s120-c” you can change it to 150 or 100 or anything else.
Also Read: How To Add Facebook Page Button To Your Website
Also Read: All In One RunTime Software Download
Change Custom Thumbnail Size For Post Images
To change the thumbnail sizes for images according to your need follow the below steps.
Go to Theme and open EDIT HTML
Copy below code and paste it in the above closing tag </head>
<script type="text/javascript">
$(document).ready(function() {$('.post-thumb').attr('src', function(i, src) {return src.replace( 's72-c', 's120-c' );});});
<!-- helparchive.blogspot.com -->
</script>You can increase or decrease the size by changing the number “s120-c”
Follow us on Instagram, blogger thumbnail size.