The first thing you'll need is an html code for your image. A lot of online photo storage places provide html codes for images that are uploaded to their site. I like to use Photobucket, as it's what I am most familiar with. If your photos are uploaded elsewhere, I suggest checking to see if you can get the html codes for them before proceeding with this tutorial.
How to upload a photo to make it fit your sidebar:
1. Create an account at Photobucket.com if you do not already have one. It's free!
2. Upload your photo as a 320x240 image.
(click on the photos in this tutorial to enlarge)
3. Once the photo has uploaded, return to the album and hover over the thumbnail of the photo. Click on 'edit'. Then click on 'resize'.
5. Check the box next to 'keep porportions'. Then enter a number into the first box that is about 5-10px less than the width of your sidebar.
To determine the width of your sidebar:
a. Log into your blog and go to edit html.
b. Scroll down and search for the section titled 'sidebar wrapper'. Click here for tip on how to easily search for sections within your template.
c. Look for the width measurement (circled in red below). If your template does not look like this, you'll need to hunt around for this number or simply take a guess. Most sidebars are 175-220px wide. The sidebar in the example below is very wide. Important: do not change anything within your template. You are just looking for the measurement of your sidebar.
7. Click 'apply', then click on 'save as a copy' below the image. You can replace the original if you'd like, but it sometimes takes original PB images a while to resize. Better to save as a copy to avoid frustration.
How To Install A Sidebar Photo From Photobucket:
1.. Go to your Page Elements page and click on 'add a gadget'.
That's it! Enjoy your new sidebar photos! Do you get html codes for your images in a different way? Please share your method with us in the comment section below!
How To Center Sidebar Gadgets
Create a Grab Box for Your Button
Image Protection: Resize Your Photos!
Get an HTML Code for Your Buttons/Photos