Before explaining the original hack , I would like to tell what most of the blogger might be doing to re-size their images while writing posts. Mostly they will use style tags to mention the width and height of the image.
Resize Single Image:
<img src=”http://yourblogname.com/thumbnail.png”style=”height:260px;width:560px;“/>
or
<img src=”http://www.yourblogname.com/thumbnail.png” width=”560″ height=”260″/>
Resize All Images:
But when you are having a number of images in your posts , then it becomes difficult to mention the image size and width in each and every image. And also if you change the template which contains different width , then you need to edit the size and width in all images.
In order to get rid off those head-aches , just follow these simple steps to resize images in your blog. Even if you have declared different image size and width in that image code , this code will overwrite those tags and will change the width and size you mentioned in the style sheet.
First go to layout section of your blogger blog. Then navigate to EDIT HTML section. Now search for this tag there.
]]></b:skin>
Now add the following code above that code line.
.post img {
float:center;
min-width:560px;
max-width:560px;
max-height:260px;
min-height:260px;
padding : 10px;
line-height : 2em;
margin: 0 auto 10px auto;
clear: both;
}
In that above code , edit the max-height and min-width tags and float to suit your main container width and height and float.
No comments:
Post a Comment