Have ready the URL of the image. Now when you click "Add a Page Element", instead of selecting "Picture" select "HTML/Javascript" instead and click ADD TO BLOG. Then type < alt="" src="http://www.blogger.com/URL" width="W"> into the HTML editor, where W is the width of the image you want displayed. This will have to be equal or less than the width of the sidebar. If you don't know the width of the sidebar, get to the template editor (click LAYOUT > TEMPLATE > EDIT HTML) and look for this block of codes
#sidebar-wrapper {
width: 150px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
This tells me the width of the sidebar is 150 pixels.
It will be good to type in some description of the image in between the quotation marks in alt="" as search engine cannot read images but can read the text in the alt tag. This will be an advantage to you if you want your blog to be easily found by search enginges. Another advantage is that if for any reason, the image cannot be displayed, instead of a blank box, the text withing the quotation marks will be displayed instead. The alt tag is optional and you may leave it out if you want. But putting some description between the quotation marks will be good for search engine which cannot read images, but can read the alt text. Also, if the image cannot be displayed for any reason, the text get displayed instead.
When ready, click SAVE CHANGES. Then in the LAYOUT, preview if you want, and click SAVE if you are satisfied. If you are not satisfied with the positioning of the elements, you can hover your mouse over the widget (then the cursor will change to a cross) and drag it to wherever you like.
