How to custom size photographs on your Blogger Postings.

Byte Magazine #1

Bugbooks

Sometimes it is nice to use many photos in your blogger post and not use a lot of space.Take a look at the one just to the left.  It can still be viewed full size by just clicking on the photo -- give it try. Yet it is small and does not overtake the page. Of course you have 3 options with all photos when making a post by  just doing a left click on the photo and selecting small, medium or large. This maybe all you need however here I will show you how to make a custom size photo. You will need to use the HTML code that contains all the display information.  This is not hard to do - I show you how below.

David give introduction on how to make custom size photos on your blog.

Byte Magazine #1 

This is the size you get with this photo by selecting the smallest size when you click on the photo in edit mode .  To make is smaller look below. It is important to know that you can make the photo appear any size you would like and when a viewer clicks on the photo it always displays in the original size.  I usually make a note on the first photo "Click to enlarge"  to remind the viewer it can be viewed larger.



Below is a copy of the HTML code for the photo above. If you look on the left side of the task bar (the task bar is just above your post  in edit or compose mode) when using "Blogger" you see the box "Compose" -The next box to the right is labeled "HTML" by clicking on this box you see the HTML version of your blog and you can make changes to this code -- We want to change just the size of the photo and I have marked the size in red height="200" and width "153' you can adjust these number to make the photo larger or smaller. I want to  these to make the photo 1/2 size to and will enter these new deminsions height="100 and width "76". I have marked the photo name in green -   title="Byte Magazine #1"   this just helps identify that you are using the correct HTML code for this photo.
-------------------------------------------------------------------------------------------------------

his is a test<br />
<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgNM_sw0DSycMdKI_N6jGKcq4jnmnFONXHob3arr_FoSgfLybUPRCuVlPz9AXSVE9KZV6dnd-BvgQg63pVftJr7x9OHijIE4IqYx8sj0E8BV8nvGsP-aJwSEScwLruEMixsCfRI3wmAVk/s1600/BYTE-1975-09-cov1.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="Byte Magazine #1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgNM_sw0DSycMdKI_N6jGKcq4jnmnFONXHob3arr_FoSgfLybUPRCuVlPz9AXSVE9KZV6dnd-BvgQg63pVftJr7x9OHijIE4IqYx8sj0E8BV8nvGsP-aJwSEScwLruEMixsCfRI3wmAVk/s1600/BYTE-1975-09-cov1.jpg" height="200" title="Byte Magazine #1" width="153" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Byte Magazine #1</td></tr>
</tbody></table>
<br />
<br />
<br />
<br />
This is a test<br />
<br />

------------------------------------------------------------------------------------------------------
Below you see the HTML code with the new size numbers in place - 

This is a test<br />
<br />
<br />
<table cellpadding="0" cellspacing="0" class="tr-caption-container" style="float: left; margin-right: 1em; text-align: left;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgNM_sw0DSycMdKI_N6jGKcq4jnmnFONXHob3arr_FoSgfLybUPRCuVlPz9AXSVE9KZV6dnd-BvgQg63pVftJr7x9OHijIE4IqYx8sj0E8BV8nvGsP-aJwSEScwLruEMixsCfRI3wmAVk/s1600/BYTE-1975-09-cov1.jpg" imageanchor="1" style="clear: left; margin-bottom: 1em; margin-left: auto; margin-right: auto;"><img alt="Byte Magazine #1" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVgNM_sw0DSycMdKI_N6jGKcq4jnmnFONXHob3arr_FoSgfLybUPRCuVlPz9AXSVE9KZV6dnd-BvgQg63pVftJr7x9OHijIE4IqYx8sj0E8BV8nvGsP-aJwSEScwLruEMixsCfRI3wmAVk/s1600/BYTE-1975-09-cov1.jpg" height="100" title="Byte Magazine #1" width="76" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">Byte Magazine #1</td></tr>
</tbody></table>
<br />
<br />
<br />
<br />
<br />
<br />
<br />this is a test<br />
<br />
<br />

----------------------------------------------------------------------------------------------------

To see the result of the new size just click the  "Compose" box in task bar  You can go back and forth between the "Compose" and "HTML" mode by just clicking on these boxes. Very easy once you see how to do this.

Byte Magazine #1

Here is the new smaller size with the new numbers in the HTML.  You can use this method of sizing your photos in most applications if you can get to the HTML code.  I use it often here on my blogger post.

David G Larsen

You should name all the photographs - This will helps viewers find your photos and blog when doing a search. Name the photo by a left click on the photo in compose or edit mode and you with be given the option to assign a name. You will also increase you chance of being picked up when folks are searching by filling in the property option - just left click on the photo in edit mode and you will see where to enter data - the data you enter is relevant search information.  I hope this post gives you a new design option when  using Blogger.

^{"by David Larsen"  KK4WW Computer Collector Historian}   
  Send Message    Like us on Facebook  My Blog about hometown Floyd VA