Automatically resize Blogger images Inside Post Area

auto resize

Blogger post image should be present organized and precise way to the readers. Sometime our Blog image cross the border of the post content and flow out on sidebar. This is looking so odd, because design of the Blog will make unpleasant. Some user make manual resize image to make fit the image width with post content wrapper but Manual system is not always an good idea. Specially for those site who has already included zillions of images. It is impossible to resize all image manually by editing every posts. 

For this reason I will share with you a trick where we can resize all Blogger Post images automatically. To apply this trick I will add simple piece of CSS code which will help to resize all images inside Blog post area. 

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on Now click on -> Template -> Edit HTML

Step 3 Now find the </b:skin> by pressing Ctrl+F 

Step 4 Copy any code from below and Paste the code above/before </b:skin> 

.post-body img {
width: 500px!important;
height: auto!important; }
}

  • or To create a minimum width of the Blog Post Image.

.post-body img {
min-width: 500px;
min-height:auto;
}

  • or To create a maximum width of the Blog Post Image.

.post-body img {
max-width: 500px;
max-height:auto;
}

Step 5 Now simply hit the Save template Button. 

Customization


  • Change the 500px width with different width that fit your Blogger Template post body,
You can select according to your content wrapper width. However 500px is used for general template. If you are using a landscape template then you can increase 500px to 600px. You can see in my  template I am using 600px width image as default. I think this trick will be helpful for resizing your Blog post images. So Let me know if this guide on how to automatically resize images in blogger is working for you.

No comments: