How To Post Photos

The most direct way to get photos on your post is to use Blogger's picture icon:

1. Go to your Post Editor. 2. Click on Blogger's picture icon. 3. When you see "browse", click on that. 4. when it takes you to your own computer, locate the photo you want to use. 5. Click Upload. 6. Click on Done. 7. If you uploaded to a post different from where it's intended to go, possibly even on a different blog, Copy the html code. 8. Paste the code into the right post.

There are alternate free photo hosts such as Picasa, Photobucket, Flickr, etc. With some of them, costs may ensue if you exceed their limits. Try any of them, though, as alternatives when your photo host is troublesome. One may work when another one does not.

There are several useful screenshots below!

First is a screenshot of the top part of this post in the Post Editor. It shows the Blogger picture icon, the tiny rectangle that's blue in the top half, and primarily green in the bottom half.]



[Below are screen shots of the photo download process.]

---

New images always load into a post at the top. If you view the image in Compose mode, you can Drag and Drop it to other locations; if you are viewing it in Edit Html mode, use Cut and Paste to relocate it.

END.

How To Post Photos

The most direct way to get photos on your post is to use Blogger's picture icon:

1. Go to your Post Editor. 2. Click on Blogger's picture icon. 3. When you see "browse", click on that. 4. when it takes you to your own computer, locate the photo you want to use. 5. Click Upload. 6. Click on Done. 7. If you uploaded to a post different from where it's intended to go, possibly even on a different blog, Copy the html code. 8. Paste the code into the right post.

There are alternate free photo hosts such as Picasa, Photobucket, Flickr, etc. With some of them, costs may ensue if you exceed their limits. Try any of them, though, as alternatives when your photo host is troublesome. One may work when another one does not.

There are several useful screenshots below!

First is a screenshot of the top part of this post in the Post Editor. It shows the Blogger picture icon, the tiny rectangle that's blue in the top half, and primarily green in the bottom half.]



[Below are screen shots of the photo download process.]

---

New images always load into a post at the top. If you view the image in Compose mode, you can Drag and Drop it to other locations; if you are viewing it in Edit Html mode, use Cut and Paste to relocate it.

END.

Small/Large Photos

"How do I get my pictures to enlarge when I click on them?" I don't keep track of all the other photo hosts, but Blogger downloads your photo in a sort of dual system so that a small image is made that fits the area (post or sidebar) and then you can click on it for the full-size large version. I used to do the same thing by hand when I made my own web sites by making both a small and large version of a picture and placing them in the format below. You can see it in the html code of your blog if you look at it in Edit Html mode; it will look something like this: <a href="http://2.bp.blogspot.com/ _AVxLoZ0mR_0/Rb_W1nLeYQI/AAAAAAAAAIg/ qCR5JYhLf6o/s1600-h/dgblues.jpg"> <img id="BLOGGER_PHOTO_ID_ 5025971925707284738" style=" DISPLAY:block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center"alt="" src="http://2.bp.blogspot.com/_AVxLoZ0mR_0/ rb_W1nLeYQI/AAAAAAAAAIg/qCR5JYhLf6o/ s400/dgblues.jpg" border="0" /></a> If you click the small image (the blue text above) you'll see the large photo (red text above), otherwise the small image is already showing. END.

Small/Large Photos

"How do I get my pictures to enlarge when I click on them?" I don't keep track of all the other photo hosts, but Blogger downloads your photo in a sort of dual system so that a small image is made that fits the area (post or sidebar) and then you can click on it for the full-size large version. I used to do the same thing by hand when I made my own web sites by making both a small and large version of a picture and placing them in the format below. You can see it in the html code of your blog if you look at it in Edit Html mode; it will look something like this: <a href="http://2.bp.blogspot.com/ _AVxLoZ0mR_0/Rb_W1nLeYQI/AAAAAAAAAIg/ qCR5JYhLf6o/s1600-h/dgblues.jpg"> <img id="BLOGGER_PHOTO_ID_ 5025971925707284738" style=" DISPLAY:block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center"alt="" src="http://2.bp.blogspot.com/_AVxLoZ0mR_0/ rb_W1nLeYQI/AAAAAAAAAIg/qCR5JYhLf6o/ s400/dgblues.jpg" border="0" /></a> If you click the small image (the blue text above) you'll see the large photo (red text above), otherwise the small image is already showing. END.

Move (Re-locate) Photos in a Post

Most photos get loaded at the top of the post. I am not aware of any way to "point" with the cursor or otherwise assign the photo being uploaded a specific position in a post. The photo or image can, of course, be moved after it has been uploaded. Below are two methods for changing the photo position(s): In Compose mode you can see the photos. You can relocate the image by dragging and dropping it. In Edit Html mode you will see the code for the photos and will have to use Preview (or switch to the Compose mode) to see images. You can move it by using Cut and Paste on the code. If Compose tab is missing, you might have to go to Settings to activate it or it may be that you need to Refresh (F5) or clear your cache and cookies to make the link/icon visible again.

Move (Re-locate) Photos in a Post

Most photos get loaded at the top of the post. I am not aware of any way to "point" with the cursor or otherwise assign the photo being uploaded a specific position in a post. The photo or image can, of course, be moved after it has been uploaded. Below are two methods for changing the photo position(s): In Compose mode you can see the photos. You can relocate the image by dragging and dropping it. In Edit Html mode you will see the code for the photos and will have to use Preview (or switch to the Compose mode) to see images. You can move it by using Cut and Paste on the code. If Compose tab is missing, you might have to go to Settings to activate it or it may be that you need to Refresh (F5) or clear your cache and cookies to make the link/icon visible again.

Placing Photos in your Post

Every photo you upload will go on top of your post and you have to move them "by hand" if you want them in special locations. You can move the photos where you want them AFTER you upload them (use either drag-and-drop with the mouse or "cut" the html photo code and then paste it into the correct location or sequence.

Placing Photos in your Post

Every photo you upload will go on top of your post and you have to move them "by hand" if you want them in special locations. You can move the photos where you want them AFTER you upload them (use either drag-and-drop with the mouse or "cut" the html photo code and then paste it into the correct location or sequence.

Table for Horizontal Photos In Post

Ronald	Southern

Haven't done any of those in a while. Tedious.

[Those of you wishing to cut to the chase quickly, start reading below the fourth straight red line below.]

Below is the code that makes a small table like the one above have photos side by side:

<center><table border=4 width=95%><tr><th align=center>Ronald</th> <th align=center>Southern</th></tr><tr><td><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvYWmbzDx0ZTNhzkxcnvD1E8roURVwVz91WLs1tbj9CR7Hm7k_MxFNEzWtzGtqjXTACBfVpxPN89G28V9DhtDv50-fAKL24BcsM5UOZxSYweUFjdFcrVBf9EZrXSqsPwipoki46n9NWSo/s1600/twinkiebite.gif\" /> </td> <td><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvYWmbzDx0ZTNhzkxcnvD1E8roURVwVz91WLs1tbj9CR7Hm7k_MxFNEzWtzGtqjXTACBfVpxPN89G28V9DhtDv50-fAKL24BcsM5UOZxSYweUFjdFcrVBf9EZrXSqsPwipoki46n9NWSo/s1600/twinkiebite.gif\" /> </td></tr></table> </center>

---

A MORE SIMPLISTIC SAMPLE OF A TABLE (followed by its code) is shown below:

PICTURE

OR TEXT

<table border=2>
<tr>
<td>PICTURE</td>
<td>OR TEXT</td>
</tr>
</table>

---

PREVENT LINE BREAKS:

In order for the Table not to cause extra line breaks in Blogger posts, there are two methods:

Method #1: You may need to copy it out like this (no line breaks of your own):

<table border=2><tr><td>PICTURE</td><td>OR TEXT</td></tr></table>

--To create additional row(s), add another set of "table records" such as

<tr><td>picture or text</td></tr>

as needed. Place them after the first table record and before the end tag, </table>.

--Remember that the photos cannot exceed the width of the area where you are placing them or else it will create problems, probably your sidebar being pushed down.

---

Method #2: This is something I've tried a number of times now. It does seem to be very effective, especially if you're going to use tables often. It is not good, though, for creating a table around a list (numbered or otherwise) because it will remove the page breaks and show the list as if it's a regular paragraph. It'll make the info resemble a traffic jam. This method makes the change in this way, using css:

Table Formatting In CSS

---

My explanation of the Table Formatting (Method #2) which I learned from the site above is as follows--changing the table in the CSS: Place the following line of code in your CSS: .nobr br { display: none } Then place the DIV tags around your table as below: <div class=nobr> <table border=2> <tr> <td>PICTURE</td> <td>OR TEXT</td> </tr> </table> </div>

Table for Horizontal Photos In Post

Ronald	Southern

Haven't done any of those in a while. Tedious.

[Those of you wishing to cut to the chase quickly, start reading below the fourth straight red line below.]

Below is the code that makes a small table like the one above have photos side by side:

<center><table border=4 width=95%><tr><th align=center>Ronald</th> <th align=center>Southern</th></tr><tr><td><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvYWmbzDx0ZTNhzkxcnvD1E8roURVwVz91WLs1tbj9CR7Hm7k_MxFNEzWtzGtqjXTACBfVpxPN89G28V9DhtDv50-fAKL24BcsM5UOZxSYweUFjdFcrVBf9EZrXSqsPwipoki46n9NWSo/s1600/twinkiebite.gif\" /> </td> <td><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvYWmbzDx0ZTNhzkxcnvD1E8roURVwVz91WLs1tbj9CR7Hm7k_MxFNEzWtzGtqjXTACBfVpxPN89G28V9DhtDv50-fAKL24BcsM5UOZxSYweUFjdFcrVBf9EZrXSqsPwipoki46n9NWSo/s1600/twinkiebite.gif\" /> </td></tr></table> </center>

---

A MORE SIMPLISTIC SAMPLE OF A TABLE (followed by its code) is shown below:

PICTURE

OR TEXT

<table border=2>
<tr>
<td>PICTURE</td>
<td>OR TEXT</td>
</tr>
</table>

---

PREVENT LINE BREAKS:

In order for the Table not to cause extra line breaks in Blogger posts, there are two methods:

Method #1: You may need to copy it out like this (no line breaks of your own):

<table border=2><tr><td>PICTURE</td><td>OR TEXT</td></tr></table>

--To create additional row(s), add another set of "table records" such as

<tr><td>picture or text</td></tr>

as needed. Place them after the first table record and before the end tag, </table>.

--Remember that the photos cannot exceed the width of the area where you are placing them or else it will create problems, probably your sidebar being pushed down.

---

Method #2: This is something I've tried a number of times now. It does seem to be very effective, especially if you're going to use tables often. It is not good, though, for creating a table around a list (numbered or otherwise) because it will remove the page breaks and show the list as if it's a regular paragraph. It'll make the info resemble a traffic jam. This method makes the change in this way, using css:

Table Formatting In CSS

---

My explanation of the Table Formatting (Method #2) which I learned from the site above is as follows--changing the table in the CSS: Place the following line of code in your CSS: .nobr br { display: none } Then place the DIV tags around your table as below: <div class=nobr> <table border=2> <tr> <td>PICTURE</td> <td>OR TEXT</td> </tr> </table> </div>

Find Width of Header For New Image

Header Width

This will tell you places to look for the width of your header. The image you want to place there should not exceed that. You should use a photo program to alter the width of your image BEFORE you upload it to your photo host (whether Blogger or otherwise). To find the width of the header 1. Click Template 2. Click Edit Html 3. Scroll down to the header,header-wrapper, or wrap code and look for the WIDTH parameter. 4. If not found, look for outer-wrapper and see it's width. It will look something like this : #outer-wrapper { width: 1000px; }

Or you could adjust the same WIDTH in the template CSS

If you are unwilling to fuss with making your photo width match the width of the header, you could try this. You might find some code like the one above or this one below showing the #wrap; change the width of 100px to 900, 850, or so until it begins to look acceptable to you. Don't Save until then. If your photo just wasn't nearly wide enough, it may still look odd (short) to some eyes. Actually adjusting the width of your image in a photo program would then be the better choice.

Another possible location of header width: #wrap { margin: 10px auto 0px; padding: 0px 5px; width: 900px; text-align:left; }

END.

Find Width of Header For New Image

Header Width

This will tell you places to look for the width of your header. The image you want to place there should not exceed that. You should use a photo program to alter the width of your image BEFORE you upload it to your photo host (whether Blogger or otherwise). To find the width of the header 1. Click Template 2. Click Edit Html 3. Scroll down to the header,header-wrapper, or wrap code and look for the WIDTH parameter. 4. If not found, look for outer-wrapper and see it's width. It will look something like this : #outer-wrapper { width: 1000px; }

Or you could adjust the same WIDTH in the template CSS

If you are unwilling to fuss with making your photo width match the width of the header, you could try this. You might find some code like the one above or this one below showing the #wrap; change the width of 100px to 900, 850, or so until it begins to look acceptable to you. Don't Save until then. If your photo just wasn't nearly wide enough, it may still look odd (short) to some eyes. Actually adjusting the width of your image in a photo program would then be the better choice.

Another possible location of header width: #wrap { margin: 10px auto 0px; padding: 0px 5px; width: 900px; text-align:left; }

END.

Centering Header Image

A. First try making the image the right size

To center image in the header, use a photo program to resize the width of the image to fit the size of the header. To find the width of the header 1. Click Template 2. Click Edit Html 3. Scroll down to the header,header-wrapper, or wrap code and look for the WIDTH parameter. 4. If not found, look for outer-wrapper and see it's width. It will look something like this : #outer-wrapper { width: 1000px; }

[More below...]

B. Or you could adjust the same WIDTH in the template CSS

If you are unwilling to fuss with making your photo width match the width of the header, you could try this. You might find some code like the one above or this one below; change the width of 100px to 900, 850, or so until it begins to look acceptable to you. Don't Save until then. If your photo just wasn't nearly wide enough, it may still look odd (short) to some eyes. Selection A would then be the better choice. #wrap { margin: 10px auto 0px; padding: 0px 5px; width: 1000px; text-align:left; }

Hopefully you made a safety copy of your template before you started monkeying with the code or making any changes--you know, in case all hell breaks loose and you need to rescue yourself!

Centering Header Image

A. First try making the image the right size

To center image in the header, use a photo program to resize the width of the image to fit the size of the header. To find the width of the header 1. Click Template 2. Click Edit Html 3. Scroll down to the header,header-wrapper, or wrap code and look for the WIDTH parameter. 4. If not found, look for outer-wrapper and see it's width. It will look something like this : #outer-wrapper { width: 1000px; }

B. Or you could adjust the same WIDTH in the template CSS

If you are unwilling to fuss with making your photo width match the width of the header, you could try this. You might find some code like the one above or this one below; change the width of 100px to 900, 850, or so until it begins to look acceptable to you. Don't Save until then. If your photo just wasn't nearly wide enough, it may still look odd (short) to some eyes. Selection A would then be the better choice. #wrap { margin: 10px auto 0px; padding: 0px 5px; width: 1000px; text-align:left; }

Hopefully you made a safety copy of your template before you started monkeying with the code or making any changes--you know, in case all hell breaks loose and you need to rescue yourself!

Create a URL For Your Profile Pic

How to get a URL for an "About Me" photo that is only on your computer at present

Another Didactic List

1. If you need to alter the photo size, use a photo program to do so while it's still on your computer. 2. Use a blog post (on your main blog or some other) and use the photo icon (in the toolbar above the Edit Post text box) to add a photo. 3. You'll Browse your own computer, select one, and upload it to that post. 4. When you've completed that, you'll have a lot of code for a large and small photo pair, part of which ("http://... etc.) is the URL. 5. Save that post, but it's not necessary to publish it. 6. Use the right-click menu on the mouse to Copy the URL. 7. You can later Paste it into the "Photo URL" box in your blog's Edit Profile list. 8. Be sure to save the change at the bottom of the Edit Profile page.

If you use Blogger's picture icon or otherwise end up with the code for both large and small images, go here to unscramble the text and select the code for the smaller one at Header Picture Code.

END.

Create a URL For Your Profile Pic

How to get a URL for an "About Me" photo that is only on your computer at present

Another Didactic List

1. If you need to alter the photo size, use a photo program to do so while it's still on your computer. 2. Use a blog post (on your main blog or some other) and use the photo icon (in the toolbar above the Edit Post text box) to add a photo. 3. You'll Browse your own computer, select one, and upload it to that post. 4. When you've completed that, you'll have a lot of code for a large and small photo pair, part of which ("http://... etc.) is the URL. 5. Save that post, but it's not necessary to publish it. 6. Use the right-click menu on the mouse to Copy the URL. 7. You can later Paste it into the "Photo URL" box in your blog's Edit Profile list. 8. Be sure to save the change at the bottom of the Edit Profile page.

If you use Blogger's picture icon or otherwise end up with the code for both large and small images, go here to unscramble the text and select the code for the smaller one at Header Picture Code.

END.

Trouble Posting Photos

A lot of people have that trouble at times, but also a lot do not. Hard to know any simple solution. If possible, change (even if temporarily) to another browser. Sometimes IE6 or IE7 will do a better job, sometimes Firefox or others will work better. If it gets the job done, you can then switch back to whatever you're used to. Or, there's no reason why you can't have one browser open in one window while you open another window for a second browser--you can alternate between them.

There are alternate free photo hosts such as Picasa, Photobucket, Flickr, etc. With some of them, costs may ensue if you exceed their limits. Try any of them, though, as alternatives when your photo host is troublesome. One may work when another one does not. Try it!

If you've been trying to add an image to text, make a new post and see what happens when you do it the other way around: add the text last. Or (again) do it the other way around! Don't treat it like a household problem, treat it like War! Try everything! All is fair! Click the Home and End buttons on your keyboard. You might even keep a Fake Blog around and try sending the photos to a post there.If that works, copy the html code and then paste it in where you want it.

Also see my Emergency Steps at the top of this blog for some general info about things not working.

END.

Trouble Posting Photos

A lot of people have that trouble at times, but also a lot do not. Hard to know any simple solution. If possible, change (even if temporarily) to another browser. Sometimes IE6 or IE7 will do a better job, sometimes Firefox or others will work better. If it gets the job done, you can then switch back to whatever you're used to. Or, there's no reason why you can't have one browser open in one window while you open another window for a second browser--you can alternate between them.

There are alternate free photo hosts such as Picasa, Photobucket, Flickr, etc. With some of them, costs may ensue if you exceed their limits. Try any of them, though, as alternatives when your photo host is troublesome. One may work when another one does not. Try it!

If you've been trying to add an image to text, make a new post and see what happens when you do it the other way around: add the text last. Or (again) do it the other way around! Don't treat it like a household problem, treat it like War! Try everything! All is fair! Click the Home and End buttons on your keyboard. You might even keep a Fake Blog around and try sending the photos to a post there.If that works, copy the html code and then paste it in where you want it.

Also see my Emergency Steps at the top of this blog for some general info about things not working.

END.

Header Picture Code

Unscrambling Blogger photo code for Header picture code

Blogger's picture icon is good for regular pictures in the post or in the sidebar, but it's overdone for the purpose of putting a photo in your header. You don't need both large and small versions for the header.

What Blogger may give you when you upload the photo to a post (Save it, but don't Publish it!) will resemble this:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK964LoyVwbgYcXUuPmmhZTyrnshzaFGdjgHZ5m-7Uv2H2nHox1yD2RhUWfFodQnxzt5LZFZIPiRQJSoNLmqHKbB28VvG3bUhb4FKapq_RJbHIc2af9W5NmFlWPuhvBhD_5jsAuWQHVos/s1600-h/dgblues.jpg"><img id="BLOGGER_PHOTO_ID_5025971925707284738" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK964LoyVwbgYcXUuPmmhZTyrnshzaFGdjgHZ5m-7Uv2H2nHox1yD2RhUWfFodQnxzt5LZFZIPiRQJSoNLmqHKbB28VvG3bUhb4FKapq_RJbHIc2af9W5NmFlWPuhvBhD_5jsAuWQHVos/s400/dgblues.jpg" border="0" /></a>

What you would need to extract is this:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK964LoyVwbgYcXUuPmmhZTyrnshzaFGdjgHZ5m-7Uv2H2nHox1yD2RhUWfFodQnxzt5LZFZIPiRQJSoNLmqHKbB28VvG3bUhb4FKapq_RJbHIc2af9W5NmFlWPuhvBhD_5jsAuWQHVos/s1600/dgblues.jpg

If you didn't notice on your own, the difference between the red code at the top and the red code above this paragraph is that the -h has been deleted after S1600.

---

SMALL IMAGE: The url contained in the blue text (marked S400) is the smaller of the images and will need no correction--just the code, such as this, shown above:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK964LoyVwbgYcXUuPmmhZTyrnshzaFGdjgHZ5m-7Uv2H2nHox1yD2RhUWfFodQnxzt5LZFZIPiRQJSoNLmqHKbB28VvG3bUhb4FKapq_RJbHIc2af9W5NmFlWPuhvBhD_5jsAuWQHVos/s400/dgblues.jpg

Assuming that the S400 is actually small and not just less than the large one, you could enter that code, as shown, into the Photo Url as your Profile Photo.

END.

Header Picture Code

Unscrambling Blogger photo code for Header picture code

Blogger's picture icon is good for regular pictures in the post or in the sidebar, but it's overdone for the purpose of putting a photo in your header. You don't need both large and small versions for the header.

What Blogger may give you when you upload the photo to a post (Save it, but don't Publish it!) will resemble this:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK964LoyVwbgYcXUuPmmhZTyrnshzaFGdjgHZ5m-7Uv2H2nHox1yD2RhUWfFodQnxzt5LZFZIPiRQJSoNLmqHKbB28VvG3bUhb4FKapq_RJbHIc2af9W5NmFlWPuhvBhD_5jsAuWQHVos/s1600-h/dgblues.jpg"><img id="BLOGGER_PHOTO_ID_5025971925707284738" style="DISPLAY: block; MARGIN: 0px auto 10px; CURSOR: hand; TEXT-ALIGN: center" alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK964LoyVwbgYcXUuPmmhZTyrnshzaFGdjgHZ5m-7Uv2H2nHox1yD2RhUWfFodQnxzt5LZFZIPiRQJSoNLmqHKbB28VvG3bUhb4FKapq_RJbHIc2af9W5NmFlWPuhvBhD_5jsAuWQHVos/s400/dgblues.jpg" border="0" /></a>

What you would need to extract is this:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK964LoyVwbgYcXUuPmmhZTyrnshzaFGdjgHZ5m-7Uv2H2nHox1yD2RhUWfFodQnxzt5LZFZIPiRQJSoNLmqHKbB28VvG3bUhb4FKapq_RJbHIc2af9W5NmFlWPuhvBhD_5jsAuWQHVos/s1600/dgblues.jpg

If you didn't notice on your own, the difference between the red code at the top and the red code above this paragraph is that the -h has been deleted after S1600.

---

SMALL IMAGE: The url contained in the blue text (marked S400) is the smaller of the images and will need no correction--just the code, such as this, shown above:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK964LoyVwbgYcXUuPmmhZTyrnshzaFGdjgHZ5m-7Uv2H2nHox1yD2RhUWfFodQnxzt5LZFZIPiRQJSoNLmqHKbB28VvG3bUhb4FKapq_RJbHIc2af9W5NmFlWPuhvBhD_5jsAuWQHVos/s400/dgblues.jpg

Assuming that the S400 is actually small and not just less than the large one, you could enter that code, as shown, into the Photo Url as your Profile Photo.

END.