Overview
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.
Related Articles:
Stopping pictures on your blog from being "clickable"
What are Picasa-web-albums?
Finding the URL of a picture that's stored in Picasa-web-albums)
Inserting a Picture into a blog Post.
Putting 3rd party HTML into your blog
Center-align the gadgets on your blog
Hosting pictures outside of Google / Picasa
Inserting a picture into your blog as a gadget
