How to use CSS to customize the image padding and border when we're posting in Blogger? It's hard to control after you used some online templates, right? Record the SOP here in order to use it again in the future.
In Blogger template, the style of image is usually controlled by the section: ".post-body img". So we need to add our CSS code in template design tool and assign it inside the HTML window of new article. For example, I want to remove the default white padding and borders:
1. add CSS codes in design tool as:
img.mov{
padding: 0px;
background: #000000;
border: 0px;
}
2. find the img tag inside the HTML window of new article as:
<img border="0" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY2VuJaXNyt5z8PkG2POXHbU1w_vrAAnVTI6R6GKZS3oLMtYw2OoH1YN817hOBEqUOocZiUujx2br3MhkEyTAZI488IFpYYWxhqJ2oqkpldtCL_9nKB9Rr-Yrv5olxH3ioyh73m6LW_Lr3/s320/DSC03355_PS2_FB.jpg" width="320" />
and assign to use the mov class as:
<img class="mov" height="210" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY2VuJaXNyt5z8PkG2POXHbU1w_vrAAnVTI6R6GKZS3oLMtYw2OoH1YN817hOBEqUOocZiUujx2br3MhkEyTAZI488IFpYYWxhqJ2oqkpldtCL_9nKB9Rr-Yrv5olxH3ioyh73m6LW_Lr3/s320/DSC03355_PS2_FB.jpg" width="320" />
Finally, my pictures will be displayed w/ different style as below..
I believe that second one is more suitable for the picture with black frame. How you feel? :P
Hope it helps & enjoy it.
