HOW TO PUT IMAGES IN YOUR SIDEBAR (UPDATED 1-9-06)

After having a conversation with Richmond of One For the Road, it occurred to me that other people starting out on Blogger might be having a similar problem, and I should probably do a post about it.

It usually happens like this... you're surfing around, and you notice a cool image on someone's sidebar or in one of their posts that you'd love to display on your own site. How can you get it there?

Well, there are a few steps involved, but it's not as hard as you might think. I'll try to simplify this as much as possible, but if I go too fast, give a holler.

How to get the image:

Go to the page where the image you want to use is currently displayed. Let's use this post by Richmond as an example, because it's a got a British flag.

Right click the image, choose "save image as" ("save picture as" in Internet Explorer), then download it to your computer. Now you need to find someplace on the web to upload it to so that you can link to it from your site. As always, I recommend ImageShack (as I explained here) because it's free, and because a LOT of people use it, so if you have problems, you can post a shout for help on your blog.

I'm going to assume at this point that you've uploaded the image file and now have a URL for your image.

Where to put the code:

Your choice - just somewhere in your template under the section that will be headed something like this (leastwise, it'll have arrows and the word "sidebar":

<!-- Begin #sidebar -->

You can experiment with putting the code in different places & see where it looks best. Usually just above or just below your blogroll is a good place, but that's up to you.

What code to paste:

Basically it's just two html commands run together. One to display the image, and one to link where you want to send people who click it. Let's say you wanted that little Brit flag to be displayed in your sidebar and linked to the "Thank You, Tony" site. It'd look something like this:

<a href="http://www.thankyoutony.com/"><img src="http://www.YourSite.com/FolderName/ImageFileName.ext"></a>

The first URL is the target site, and the second URL is the image source.

Once that's pasted into your template and your preview looks good (click the image in the preview screen, just to be sure it takes you where you want to go), save your template, and rebuild. That should take care of it.

<img src="http://www.YourSite.com/FolderName/ImageFileName.ext">

1) Go to the "create post" screen on your blog

2) Click the "add image" button

3) Upload the picture you want on your sidebar (it's easier for this process if you select "none" as your layout, but not essential)

4) Select the "Edit HTML" tab above editing box, and you'll see some alphabet soup like:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/7468/195/1600/myimage.jpg"><img style="cursor: pointer;" src="http://photos1.blogger.com/blogger/7468/195/320/myimage.jpg" alt="" border="0" /></a>

The image you uploaded will be located at the first URL. In this case:

http://photos1.blogger.com/blogger/7468/195/1600/myimage.jpg

The other URL is the same image except resized according to whether you selected "small", "medium", or "large" for your "image size" when you uploaded your picture. You won't need that.

5) Now that you've found the URL you need, copy and paste it into your favorite text-editing program like Word, Notepad, or (my favorite) NoteTab Lite, because when you go to edit your template, you're going to lose the URL location from the post, and unless you have it saved somewhere else, you'll never find it again (at least until Blogger adds an image management feature to their image hosting).

6) Now you're ready to follow the instructions at the beginning of the post.

"Why don't I just use the URL of the image where it's already at? That'd save me a lot of time & trouble without all that downloading & uploading hooey"

Yes, it would. This is known as "hotlinking" - displaying an image on your site that's hosted on someone else's server. If you do it to a complete stranger, this is somewhere on the border between rude and criminal, because some people pay for their bandwidth, and you're using their bandwidth for free when you do this. So every time the image gets loaded on your page, someone else is paying (or at least losing resources that they've paid for) for your free ride.

If you want to hotlink an image with a clean conscience, you can e-mail the person whose site the image is on and ask permission to do so. If they say yes, then go right ahead. If they say no, then accept their decision graciously, because it's fairly presumptuous of you to ask in the first place.

"But what if the person with the image isn't paying for his bandwidth? Richmond's getting free image hosting, so it doesn't matter if I hotlink it, right?"

Kinda. At least in the sense that it's not so presumptuous to ask permission. But there's also a practical reason to find your own image host

If anything ever happens to Richmond's image (say she deletes it, or she quits blogging and ImageShack takes it down after a while) you're creek-up and paddleless - left with a broken image in your sidebar and no way to fix it. But if you have a copy of the image on your own computer and YOUR image server goes down, at least then you can find another host for the image and fix the problem.

Generally speaking, there isn't a problem with grabbing images from other sites (except for corporate tight-asses like Disney, The Simpsons & Barbie, who are viciously protective of their copyrights), however, if you do so, please consider putting up a post with a link to the site you got the image from as a "thank you".

UPDATE 7-9-05: See comments for some discussion of copyright issues.

NOTE: [If you've found this post useful enough to blog about, send a trackback or e-mail the permalink to me at harvolson-at-gmail.com and I'll add you to my Bad Example Groupies blogroll. See this post for details]