Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How To Change Thumbnail Size for Blogger Images, Popular Posts Widget

Blogger by default assigns a 72 x 72 pixel size for thumbnails generated from your post images. You may desire to change the image thumbnail size on the Popular posts widget or even thumbnails displayed on homepage, generated from blog posts.

In your template, you'll find a couple of instances of the
"" tag . Using this tag, you can pick up the first image from a post and generate its thumbnail. By assigning a class/id to this tag and using a simple jquery code, we can define a custom thumbnail size for it.

Before you begin, make sure you have jquery installed in your template. If not, copy the latest version from below and paste it above the closing head tag .

Custom thumbnail Size for Post Images 

As mentioned in the begening, a 72 x 72 pixel size Thumbnail from post image can be created using the tag: 

1. To the relevant image tag, simply add a class or id to the tag like this: 

.post-thumb').attr('src', function(i, src) {return src.replace( 's72-c', 's120-c' );});});

3. The "120" is your new thumbnail size. You can increase or decrease the thumbnail width by changing the "120" to any other number. Lastly, ".post-thumb" is the class you have assigned to your images.

Changing thumbnail Size In Popular Posts Widget

Changing the thumbnail size for Popular Post images is simple. Just paste the code below just above closing head tag in your template.

120-c' );});});

Change "120" to any other number to set the desired size for popular posts thumbnail images and you are all done.

This post first appeared on Blogakona, please read the originial post: here

Share the post

How To Change Thumbnail Size for Blogger Images, Popular Posts Widget


Subscribe to Blogakona

Get updates delivered right to your inbox!

Thank you for your subscription