Whenever you upload a image on blogger, by default, the size of image is medium which has 240pixels height and 320pixels width. To change the size of picture, you need to click on it and options available to you are small, medium, large, x-large, original size, this are the default options available to every user. If want the size of image to be between medium and large or between large and x-large or of any size, you need to edit the HTML code of that particular image which is very easy to do. But finding HTML code of that particular image can be frustrating and confusing if your post consist of too many text, images already. However, confusion can be avoided by simply pressing " ENTER " button 4 to 5 times after image, that is, gap/space between " Image " and "Text after that image " should be of 4 to 5 lines (see picture), you'll understand why we did this as you read more.
Follow this simple and quick steps one by one and at the end you'll have image of desired size :-
Step 1 :- Upload/place the picture wherever and whichever you want, the size of image would be medium by default. (In Compose mode)
Step 2 :- After placing/uploading image, just after image, click and press " ENTER " button 4-5 times such that there is some gap between " Image " and " Text after that image ". This step is important if you are uploading pictures after writing/completing your entire text work of that post/blog. Due to gap in-between, it becomes easy to locate HTML code of that particular image when you switch to HTML MODE to edit it's HTML code. Otherwise, finding it's HTML code will consume lot of time.
Step 3 :- Click on image and select Small or Medium or Large or X-Large size, any of them, but do not select " Orignal size ".
Step 4 :- Switch to HTML MODE by clicking on HTML.
Step 5 :- Scroll down and as you scroll, at some instant, you'll see this
<br />
<br />
<br />
<br />
<br />
(you'll find "<br /> " 5 times if you had pressed ENTER button 5 times after that image which you want to edit, if pressed 4 times, you'll see " <br /> " 4 times and so on)
Step 6 :- Just above that first " <br / > ", there will be some 3-4 lines code starting from
<a href = " http://.................................................................................and ending with ....................................................</a> </div>. Copy that code and paste it in " Notepad "(To open Notepad, press " Windows + R " and type " Notepad " and press ENTER button).
Step 7 :- Switch back to COMPOSE MODE.
Step 8 :- Click on image and select " Original Size ".
Step 9 :- Switch to HTML MODE.
Step 10 :- Again find those
<br />
<br />
<br />
<br />
<br />
Compare the 3-4 lines code above first " < br /> "starting from " <a href= " http://..............." with the code which you had copied into Notepad. You'll find " height and width " missing, everything else will be same. You can write missing code manually or copy that height and width from Notepad and paste it.
Step 11 :- Change dimensions of height and width as you want
For example :-
height = " 700 " and width = " 400 "
height = " 600 " and width = " 300 " and so on.
Keep on changing dimensions till you find image of desired size. As you change dimensions, side by side keep on checking how does that image appears on your blog/post in PREVIEW Mode in other tab.
Step 12 :- When you get satisfied with image size, switch to COMPOSE MODE and delete that gap/space which you had created between " Image " and " Text after that image ". Job is done, now delete/close that Notepad file.
For every image, you need to follow these steps. If you had changed dimensions of height and width in HTML Code mentioned in " Step :- 6 ", you would have got a stretched picture which would not be clear enough. Whereas, when you change dimensions of height and width in HTML Code mentioned in " Step :- 11 ", you get a shrank and clear picture. Shrank pictures are more clear compared to stretched pictures [See Picture For Proof]. You can try editing height and width in both step-6 and step-11, you'll see the difference. Repeat these steps for adjusting any image to desired size
.
height = " 600 " and width = " 300 " and so on.
Keep on changing dimensions till you find image of desired size. As you change dimensions, side by side keep on checking how does that image appears on your blog/post in PREVIEW Mode in other tab.
Step 12 :- When you get satisfied with image size, switch to COMPOSE MODE and delete that gap/space which you had created between " Image " and " Text after that image ". Job is done, now delete/close that Notepad file.
For every image, you need to follow these steps. If you had changed dimensions of height and width in HTML Code mentioned in " Step :- 6 ", you would have got a stretched picture which would not be clear enough. Whereas, when you change dimensions of height and width in HTML Code mentioned in " Step :- 11 ", you get a shrank and clear picture. Shrank pictures are more clear compared to stretched pictures [See Picture For Proof]. You can try editing height and width in both step-6 and step-11, you'll see the difference. Repeat these steps for adjusting any image to desired size
WOWWWWWWWW, awesome technique man. I was struggling to fit images within post column the way I wanted. You just made my day, thanks a lot! was so easy.
ReplyDelete