Automatically resize Blogger images Inside Post Area
One question I am asked often is from Blogger users wondering how to make their photos fit the width of their post area. How to automatically resize images within blog posts on Blogger to be all the same width and fit the post area perfectly.
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.
Post a Comment