How to Put a Link on an Image

I'm assuming you already know how to link to images within a blog post (like this pig one) and how to link to images in your blog sidebar (like the matching pig button over in my sidebar). It's pretty easy because Blogger provides the tool for you.

But if you need something a little more complex—like say you want to post a Photobucket logo in your sidebar with some text in it— then you need to code it.

1. First, the image needs to be hosted somewhere. I use Photobucket. It's free and it's easy to use. So create your account and upload your image. (Instructions for that HERE.)


2. Leave the Photobucket screen up. Open a new window or tab and go to your blog controls.
   


3. Click on the Layout tab, then the Page Elements link.


4. Click on the Add a Gadget link in your sidebar area.
   


5. When the gadget selection screen displays, click on the + sign by the HTML/JavaScript option. This brings up an empty "Configure HTML/JavaScript box.
   


6. Type a title in the Title box (optional).


7. Then copy the code below and paste it into the big white Content box.
   
   

   
   <div align="center">
   <a href="http://weblink.com/"><img src="http://urlofimage" ></a>
   </div>
   

   
   
   
8. Replace http://weblink.com/ with the URL address you want to go to when you click on the image. For example: http://photobucket.com
   


9. Replace http://urlofimage/ with the URL address of your hosted image. You find that address by putting your cursor over your hosted image in Photobucket, then copying the code for Direct Link. For example: http://i177.photobucket.com/albums/w213/rakrose/iHeartPhotobucket.jpg
   
   (The div align="center" and the /div (inside the <>) make the image line up in the center of your sidebar.)


10. Using my Photobucket logo in my sidebar as an example, I typed in the following code:
    

    
    <div align="center">
    <a href="http://photobucket.com/"><img src="http://i177.photobucket.com/albums/w213/rakrose/iHeartPhotobucket.jpg" /></a>
    </div>
    



11. Type your text. For example, Free Photo Hosting!
    


12. If you want to preview your code, click on the Rich Text link in the top right corner.
    


13. When your code is the way you want it, click the SAVE button to return to the Page Elements area.


14. You'll see your new gadget box at the top of the sidebar area. Drag the gadget box to where you want it in your sidebar.
    


15. Click the SAVE button at the top right of the Page Elements area.
    

---------
©Karlene Browning, Karlene's Cheat Sheet.