After uploading your picture or graphic to Photobucket:

1)      Beneath your picture in your Photobucket account, there are four options for the type of code received: “Email & IM,” “Direct Link,” “HTML Code,” and “IMG Code.”  When inserting a picture into your sidebar, you will need to use the HTML Code.  Right click and copy the information in this bar, and then open your HSB account.

2)      In your account, go to “Settings” (lower right corner) and then “Template” (upper left).  Your template code will appear—don’t get too scared, it’s really quite simple.

3)      The first half of your code will most likely be CSS—short, indented paragraphs that you needn’t bother with just yet.  Soon you will see the < body > tag (a tag is anything enclosed in brackets <>).  Keep scrolling…and scrolling….until you see any one of the following: <--BEGIN RIGHTSIDE--!> if your sidebar is on the right, <--BEGIN LEFTSIDE--!> if your sidebar is on the left, or maybe just <--BEGIN SIDEBAR--!>.  All the HSB templates vary, but you’ll probably be able to find where your sidebar begins.

4)      This step is up to you.  By scrolling through your sidebar code, you will need to decipher the HTML (look closely—it’s generally fairly easy to figure out) and decide where you want your image. 

5)      Once you’ve decided, paste the code you copied right where you want it.  It might be helpful to try several locations, previewing the template each time to see if it ends up where you want it.

6)      One last detail: the Photobucket HTML codes automatically link the image back to Photobucket.  I find this annoying; if you would like to remove the link (so the picture can’t be clicked on), simply cut out the first set of brackets (< through >) and the last set of brackets (that one is always the same: < /a >).  You’ll be left with something that looks like this: < img src=”yourimagelocation.jpg” >, only chances are it’ll be a bit longer. 

Optional:  If you want your image to be centered in your sidebar, type <*center> directly before the image code and <*/center> directly after it. Cut out the asterisks--they are only there to keep the computer from translating the HTML, rather than letting you see the actual tags.