LINING UP PHOTOS 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 720 spaces. You can control the width of your space available for placing photographs by adjusting the required width using the spacing facility made available via your blog-spacing limits using the page monitor.

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).

This is to be inserted in the <imgsrc=" " bit in the table. The completed line of coding will read like so, for the first pic.:

img height="320";img src="https://1.bp.blogspot.com/-3IHcIsaQ3I8/ XjGTJJH6GFI/ AAAAAAAAIWE/ XThJF0neU4M7RPWwPOXJQRWZf0n-ESWaQCLcBGAsYHQ/s320/236207-big6yomg.jpg" width="82"/></td>

Do this for each image, one by one.

There you go, six pics aligned neatly.

If you want to equalise or change the spacing, you can edit your pics in both the Compose mode and the HTML mode. The Compose mode is easier, unless you are comfortable with HTML. In the Compose mode, click on the 1st pic and you will see a black vertical line, as tall as the pic, appear to its left. Use the → tab and move it to the second pic. Just use the space tab on your keyboard to move that image, or the → tab to cross over to the next pic, or whichever. Just make sure you don’t drop the last pic to the next line. If you do drop the pic, just hit the return arrow. Space the 1st image last of all. In the HTML mode, you have to type in the code for one space, starting with an ampersand, using the letters nbsp and ending with a semicolon where you want to get one space. In fact, when you use the Compose mode and tap the keyboard to space out the pics, you are actually adding that code in the HTML, once per tap. Check it out by going over to the HTML mode. REMEMBER to hit the Update button once you are done.

Let's say you want to add a seventh picture. First, go to HTML and insert this line below the six pics: <td><img height="xxx"><img src="  " width="xx" /></td>

Make sure it is above the closing tags of /tr/tbody/table. Let's say you want to insert the image below:

                 

The least cluttered method is to first save this work, or publish it and on the control panel/list of blog posts, select it and click Revert to draft, a temporary measure. Now open a NEW post and title it xyz or whatever. Upload the seventh pic into this post. Go to HTML and note its height and width. It will be 320 and 78-83 or thereabouts. Copy the url. Return to your original post and publish it to take it out of the draft mode. Add the data of the seventh pic in that seventh line as always. The height, width and the url go into their slots. The seventh pic will appear. 

Go back to the Compose mode and remove the downloaded pictures by simply clicking on them and selecting the 'remove' option. Finally, click on update and voila...

If you want to line up 10 bottles in a section, you will have to reduce their size to less than 200 height. 150 will do nicely. Since you have shortened the height by 150/200, i.e. to 75%, reduce the width of each bottle to 75%.

Don't forget to delete that small NEW post, xyz or whatever!

What if you do not get the width in the HTML code?

<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" /></a></div>

Simple. Just calculate it as follows:

Height 320/original height 1600 x original width 414.

320      x      414  =  82.8 or 83.

1600