HTML code or script to put a picture into your blog's sidebar, header or footer | Easy way to get the code

Blogger's "Image gadget" in Layout is the normal tool for adding a picture to your blog's sidebar, footer. But if you want more control over the picture size and caption. Eg. you may want to have text to display on picture, control the size of picture and caption or text with the Picture. To do this, you need to get the HTML code for the picture, and then put it into your blog as an HTML-gadget.

I am going to tell you 'How to get HTML code to put a Picture into your blog as an HTML-gadget'. This is very easy way to get the code, you don't need to know about coding.

Blogger's Post-editor makes it very easy to do this without writing the code yourself.

So, you can use the Post Editor to get the HTML code that you need to put a picture into your sidebar, header, footer, or anywhere else a gadget can go. You can also create 'About me or About Author' with this method. You can use this method in WordPress also.

Generating the HTML code for a Picture by using the Post Editor

1. Log in to your Blogger account.

2. Start a 'New Post'  ( you don't have to publish this post, you can delete the post after getting the HTML code).

3. Drag and drop the image you want into the Post or use the 'Insert Image' option on the toolbar to add a picture. Blogger will prompt you to upload the picture, or to choose it from a Google-album-archive or to enter its URL.

4. You can add caption , Text or link a url to the picture. If you want align the Picture to center, left, or right you can use 'Alignment' option on the Toolbar.

5. Now switch to the HTML tab, 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 it will show you the size of the picture).

6. In the HTML code there is height="200" & width="200" , which shows the size of the Picture. You can change these numbers to get your desired size for the Picture.

7. There is also border="0" in the HTML code, change the number to give border to your Picture. Keep it "0" for borderless Picture.

8. Copy the HTML code then return to the list of posts, you may be asked if you want to leave the page without saving - click Yes, or you may have a new draft-status post, which you can delete.

9. Now paste the code into an HTML/Javascript gadget, or anywhere else that you need it - even into another post or page that you are editing in a separate window, or into a totally different tool.

Thats it! now the picture will appear in your Blog where you placed it.