How Do You Display A Picture on Your WordPress Sidebar

I received a follow-up question from the recent WordPress & Do Follow! post.

I have a question.  Once I have the Dofollow button (right now I have it stored in my pictures file and will upload it to the Media page), how do I get it on the site in the column on the right?  I have an Aweber form and a Twitter Button in that column.  I’d like to put the DoFollow under the twitter button but don’t know how.  I did not add the form or twitter button – someone did that for me.

This is a great question, not just becuase it is asking how to notify people that you are a Do Follow site. It is also great because it allows me to explain how to display ANY graphic or picture you might want to on your sidebar of your blog.

My instructions will assume you have the image on your computer. You may have downloaded it from the web, received it in an email and you saved it on your computer, or maybe you created it yourself.

Step 1 – Login to your WordPress Dashboard area. Click on the Media / Add New link on the left side.

Step 2 – Click the Select Files Button and navigate to where the file is stored. Once you find it, click on the Open button.

Step 3 – Once it is uploaded, you will see a window with information on it. Look at the bottom for the File URL – this is where the file is saved on your server. In the example below, I blurred part of the URL for security reasons.

You want to copy that name to your clipboard  – double click on the link and you will see the whole thing get selected. Under your Edit Menu of your browser, select Copy (or press Control C on a PC, or Command-C on a Mac). Once you have it on your clipboard, click the Save all changes button.

Step 4 – In order for this to be displayed in your sidebar, you will have to create a new widget. This is easy, once your get the hang of it. Click on Appearance / Widgets link on the left side of your Dashboard. On the new screen, you will see all sorta of various widgets available to you. You will want to use a Text widget. Find the Text Widget, click it and drag it to your sidebar area on the right side of the screen. Once it is there, you will see a dotted box appear. Let the mouse button go and the widget has been added to your sidebar!

In the main area of the text widget (not the title, but below it), paste the contents of your clipboard, press the [RETURN] key a few times, and then  copy and paste the following code:

<center><a href="" title="Do Follow"><img src="xxxxx" border="0" alt="Do Follow" /></a></center>

The result should look something like this:

Step 5 – highlight the first part with the file name (make sure you get the full name from the http to the .jpg), press Control-X on a PC (or Command-X on a Mac). This will copy it to your clipboard and Cut it from the text widget. Next, double click on the xxxxx to select it all (you only want to select the x’s, not the quotes) and press Control-V on a PC (or Command-V on a Mac) to paste the clipboard text. The final result should look like this:

Finally, click on the Save Button at the bottom of the Text widget.

You are all done! Check out your website and you should see the fruits of your efforts!

Let me know if you try this and it works!