How to Resize Images Automatically in Blogger

Most bloggers are faced with the issue of size of images on their blog. Images of large size overflow into side bars and which ruins the blog’s appearance. Blogger provides the facility of resizing the images in the pos editor but this doesn’t work well according to the blog’s design. However, CSS Code makes it possible to automatically resize all the images on your blog and fit them beautifully in the blog’s design.
Some might think that resizing images manually is easier and better. Yes, of course you are right but what if you have 40 or 50 images to resize at the same time. It will take days to click and select images one by one for resizing. It is never convenient but with pure CSS Code you can resize all images to make your blog images “all in one” size.

In this tutorial we are going to explain you a simple trick with the help of which you just have to edit your html template and not all the posts one by one. It saves time as well as from hectic effort. It will also improve the visual appearance and flow of your blog.

1: First sign in to "Blogger Dashboard" and select "Template" from drop down menu and click "Edit HTML".

2: Now in the new Blogger HTML Editor search for the ]]></b:skin> tag.

3: Just above this tag paste the following CSS coding.


Now you can change the values of Width and height, according to your requirement. You can also add a border to your images through (border: 1px solid #d2d2d2;) which is simple border CSS command. After customizing, press the "Save Template" button and that’s all.

I would suggest that you should limit automatic resizing only to your blog images and not expand it to design graphics and profile pictures. So, limit the CSS Code to a specific portion of blog, say to the images in a post body. Other parts of your blog will remain unaffected.