Using your photobucket pictures to add links

If you've spent any time looking at my sidebar, I'm sure you've seen this:

Stalk me here....lol








mommacow39
Today I'm going to tell you how I made it.

By now I'm sure you've realized that my favorite widget is the HTML/JavaScript widget. I use it often. Very often. And that's the widget I used to put these social network links on my sidebar. This is what I did:

1. First I needed the pictures. I used Photobucket (of course). If you don't have an account there yet, click here to get one. If you do have one, log into your account.

2. At the top of the page there is a place to search. It looks like this:

3. Put in what you want to find an image of....for example, when I found the picture I used for my Twitter link, I just put in "Twitter". It will give you the resulting pictures. When you find the one you want, click on it and then choose "copy to my album". You have to place your mouse over the picture to bring up the copy option. It looks like this when you do:

4. After you save it to your album, click on the picture to get the codes. This is what that looks like:

5. See where it says "HTML Code"? That's what you need. Copy it.

6. Go to your Blogger dashboard/Layout/Page Elements.

7. Add a Gadget/HTML/JavaScript.

8. Paste the code into the widget. It will look something like this (remember, the red symbols won't be there; I have to show them to show you the code):

(<)a href="http://photobucket.com" target="_blank">(<)img src="http://i269.photobucket.com/albums/jj57/mommacow39/twitter-1.png" border="0" alt="blog twitter">(<)/a>

9. Notice the section I have in purple. That's the part you're going to change (except for also taking out the red parenthesis). You are going to change it to the site you want to link to. So if I wanted to link that picture to my twitter account I would change the http://photobucket.com to http://twitter.com/katbrak and my code would now look like this:

(<)a href="http://twitter.com/katbrak" target="_blank">(<)img src="http://i269.photobucket.com/albums/jj57/mommacow39/twitter-1.png" border="0" alt="blog twitter">(<)/a>

10. When you have all the pictures/links you want on the widget, save it. Place it where you want it on your sidebar. Preview your blog and make sure it looks the way you want it to and then save it too.

That's it! You now have learned how to link Photobucket pictures to your sites. (By the way, you can click on any of the pictures in this post to visit me on my other sites...) Don't forget about the center code to make it look just the way you want it to...click here to learn how to do that if you missed it.