How to Place Images (and Text) on Your Blog's Sidebar

How do you place an image on your blog sidebar and specify it's position? How do you float some text beside the graphic? Keep reading!

First, create a new blog post (it won't be saved) and insert your graphic into the post. Choose Left, Center, or Right for the image position.

You can change the position of the image in the HTML, but it is easier if you choose your position when you upload the image. Then look at the HTML that was created for the image.

The HTML for the image should look similar to the example below. If you copy a URL link from Picasa or another online image facility, you may have less code:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://4.bp.blogspot.com/_xxxxxxxxxxxx/s1600/image.gif"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 160px; height: 176px;" src="http://4.bp.blogspot.com/_xxxxxxxxxxxx/s1600/image.gif" border="0" alt="" id="BLOGGER_PHOTO_ID_xxxx" /></a>

Assuming you have no need for the image to be a link, just copy the portion of the HTML that is highlighted in red. Don't accidentally copy the </a> at the end.

Next, go to the Layout tab of your blog (perhaps in a different browser tab or window) and click "Add a Gadget" on the sidebar. Select the "HTML/JavaScript" gadget. Paste the HTML for the image into the gadget. Save the gadget and view your blog.

You may also want to add some text to display above, below, to the left, or to the right of the graphic. See the 3 examples below for details..

Example 1: Image is Centered on Sidebar

The image in the example at left is centered on the sidebar. It was given a title of "Image Centered," but you can leave the title box empty in the gadget if you do not want a title above the image. You can include text above or below the image in the HTML/JavaScript gadget. Here is the HTML for the example at left. We have added a paragraph of text after the image:



<img style="display:block; margin:0px auto; cursor:pointer; cursor:hand;width: 79px; height: 79px;" alt=""
src="http://lh6.ggpht.com/_xxxxxxxxxxxxxxxxxxx/s800/bookx.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_xxxx" />

<p style="color:#990000;font-weight:bold;text-align:center;font-size:90%">Place text above or below the image</p>

The style rules that center the image are: display:block;margin:0px auto; - You can change the value for the top and bottom margins, but the left and right margin values must equal auto. If you want to specify a different top and bottom margin, use this example: margin:4px auto 10px auto; - the values specify, in order: top, right, bottom, and left.

You can add more style rules to the text, such as: line-height:1.5em;text-transform:uppercase;font-style:italic;background-color:#FFFFFF;padding:4px 2px 4px 10px; ... The values for padding, like margin, go in this order: top, right, bottom, and left.

Example 2: Image is Floated to the Left

The image in the example at left is floated to the left. A paragraph of text follows the image in the HTML/JavaScript gadget, and it flows into the empty space to the right of the image. Here is the HTML for the image and text in the example at left:



<img style="float:left; margin:0 0 0 10px; text-align:center;cursor:pointer; cursor:hand;width: 79px; height: 79px;" src="http://4.bp.blogspot.com/_xxxxxxxxxxxxxxxx/s1600/image.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_xxxx" />

<p style="color:#990000;font-weight:bold;text-align:left;font-size:90%">This text will wrap to the right of the image</p>

The style rule that floats the image to the left is: float:left; ... Notice the style rule of margin:0 0 0 10px; ... This gives us a 10px margin on the left side of the image. Change these values if desired. The values for margin, like padding, are in this order: top, right, bottom, and left.

You can add more style rules to the text, such as: line-height:1.5em;text-transform:uppercase;font-style:italic;background-color:#FFFFFF;padding:4px 2px 4px 10px;

Example 3: Image is Floated to the Right

The image in the example at left is floated to the right. A paragraph of text follows the image in the HTML/JavaScript gadget, and it flows into the empty space to the left of the image. Make sure you place the text after the image or you won't get the desired results. Here is the HTML for the example at left:


<img style="float:right;margin:0 10px 0 0;cursor:pointer;cursor:hand;width:79px; height:79px;" src="http://4.bp.blogspot.com/_xxxxxxxxxxxx/s1600/image.gif" border="0" alt=""id="BLOGGER_PHOTO_ID_xxxx" />

<p style="color:#990000;font-weight:bold;text-align:left;font-size:90%">This text will wrap to the right of the image</p>

The style rule that floats the image to the right is: float:right; ... Notice the style rule of margin:0 10px 0 0; ... This gives us a 10px margin on the right side of the image. Change these values if desired. The values for margin, like padding, are in this order: top, right, bottom, and left.

You can add more style rules to the text, such as: line-height:1.5em;text-transform:uppercase;font-style:italic;background-color:#FFFFFF;padding:4px 2px 4px 10px;


We hope this post has helped. By the way, if you need to learn more about images, we've got some great tutorials on our main website - such as All About JPG and GIF. Cheers!

►  Take a look at some of our other interesting posts, such as How to Remove Borders from Images in Your Blog