FASTEST WAY TO ALIGN PICTURES IN BLOGGER

ALIGN PHOTOS IN BLOGGER: AN UPDATED GUIDE

The free blog posting system, Blogger, does not provide the latest in technology to help your blog prosper. It is a daunting task to make money from your blog on Blogger. Getting photos in a neat line or position is impossible unless you know / understand HTML. Paragraph spacing, font sizes, indents, etc., are next to impossible. I have written a tutorial on how to arrange photos in a neat line, not strewn around the post with only the size and area under your control. The only limiting factor here is that the total width of all photographs should not exceed 620 spaces. 

First get your pictures in order. Use MS Picture Manager or MS Paint to edit your pictures, crop them, recolour them, whatever. Try and keep the width to the minimum required. Having done so, create a new folder on your Desktop and copy/paste these pics in the new folder.

Open Blogger and create a NEW POST. Give it any title, XYZ....

Upload these pictures into the new post-they will appear one below the other. I will upload six pics. Their default height is MEDIUM 320 pts. You can see that for yourself by just going to the HTML mode top left. If you want smaller pics, use the cursor and click on each pic and reduce each pic to SMALL size. This will reduce their height to 200 pts as you can see in the first picture below. You can also resize them later by adjusting the blue envelope they get covered in when you click on the pics, after you finish your placements.

Now switch to the HTML mode and have a look. You will see data of the dimensions of the original picture, which was huge, and data for the edited picture. We are no longer interested in the original picture. This is the HTML for your first pic: 

<div class="separator" style="clear: both; text-align: center;">

<a href="https://1.bp.blogspot.com/-3IHcIsaQ3I8/ XjGTJJH6GFI/ AAAAAAAAIWE/ XThJF0neU4M7RPWwPOXJQRWZf0n-ESWaQCLcBGAsYHQ/s1600/236207-big6yomg.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1600" data-original-width="414" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinV0Jvpu8oAfriijUwEnC4bxqpPKn6ucMW4b88m6hH5A2wWbil0rTMl1Xanum56zxCkqOAiFjaEFz1DL_TMy3-lHuwlsK6Bs3XOjYeqJtMbcurpdSAT8-3AJ8rBski7L48E2NdLwm5X3Sr/s320/236207-big6yomg.jpg" width="82" /></a></div>

 
Let's move to the next part. You have need your pic data lodged in between and including the two segments highlighted in yellow. You can see the source of that pic also. "src". Six pictures have to be aligned. 

Copy/paste the code just below into the empty space below the last line of HTML:

<table>
<tbody>

 <tr>

<td><img height="xxx"><img src="  " width="xx" /></td>

<td><img height="xxx"><img src="  " width="xx" /></td>

<td><img height="xxx"><img src="  " width="xx" /></td>

<td><img height="xxx"><img src="  " width="xx" /></td>  

<td><img height="xxx"><img src="  " width="xx" /></td>

<td><img height="xxx"><img src="  " width="xx" /></td>  

</tr>

</tbody>

</table>

Let's take one line apart, shall we?

<td><img height="xxx"><img src="  " width="xx" /></td>

This line shows up three blank spaces, all within inverted commas (" "). It is asking for three parameters, image height, image source and image width. These are all available in the HTML code of that image. Easy!

As there are 6 pics, I have used 6 lines of placement code, starting/ending with (td,/td). In the first line, insert image height, 320, replacing xxx and image width 82 in place of the xx. Only the source of the image needs to be filled in the slot between the inverted commas where it says img src " ":

<td><img height="320"><img src="  " width="82" /></td> Note that I have retained the " " around the numbers. This is important.

Copy this bit of code from the src in the HTML: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinV0Jvpu8oAfriijUwEnC4bxqpPKn6ucMW4b88m6hH5A2wWbil0rTMl1Xanum56zxCkqOAiFjaEFz1DL_TMy3-lHuwlsK6Bs3XOjYeqJtMbcurpdSAT8-3AJ8rBski7L48E2NdLwm5X3Sr/s320/236207-big6yomg.jpg (starting with https and ending with jpg).