Getting The HTML Code To Put A Picture Into Your Blog

You can use the Post Editor to get the HTML code that you need to put a picture into your sidebar (or header or footer, or anywhere else a gadget can go).

Overview

The Picture gadget is the normal tool for adding a picture to your blog's sidebar.

But there are times when you want more control over the picture size or behaviour.  Eg, you may want to have two pictures very close to each other and guarantee that they're the same size.   To do this, you need to get the HTML code for the picture, and then put it into your blog.  Fortunately, Blogger's Post-editor make it very easy to do this without writing the code yourself.

Using the Post Editor to generate the HTML for a picture

1  Start a new Post  (you're not ever going to publish this:  it's just a work-area)

2  Don't enter any text:   just use the Picture icon on the toolbar to add a picture.   Blogger will prompt you to upload the picture, or to choose it from a Picasa-web-album, or to enter its URL:  add the picture the way that you usually would.

3  Switch to Edit HTML mode   (called HTML in Blogger-2011)
This will show you the HTML code for displaying the picture, as it is set to display in the Post (depending on the picture-settings you've chosen, it may be centered or right/left aligned, and the size may vary).

4  Copy the HTML.

5  Switch back to Compose Mode, called Compose in Blogger-2011), so you don't get confused the next time you edit a post.

6  Return to the list of posts:  you may be asked if you want to leave the page without saving - the answer is Yes.  Or you may have a new draft-status post, which you can delete.

You can now paste the HTML code that you copied into into an HTML/Javascript gadget, or anywhere else that you may need it - even into another post that you are editing in a separate window.