How to control Image display and properties in Simple Blogger Template

September 7, 2013

If you are using a Simple Blogger Template as your blog theme, you may notice that the image inside the post body will be display as maximum resolution if you select the image to full size when you attaching the image.

To take full control over it, you can customize it using CSS. This setting can be done in Blogger Template Designer. Just follow these below steps:

1. Go To Template > Live on Blog : Customize

2. Advance > Add CSS

3. Add code below:

.post-body img{box-shadow:none;max-width:100%;}

4. Click 'Apply to Blog'

*max-width:100% tells the browser to shrink or shrank the image to follow 100% of post-body width.

*box-shadow:none; I do not like shadow all around the image. So I set it to none.