Tell-it Tuesday: How to add a linkable, click able, steal-able button to Blogger blogs

The very first step in making a linkable, click able, steal-able button with text box is to have an image to use as a button. Most often buttons like this are 125x125. I think that's a pretty safe standard-you want to make sure they fit in someone else's blog sidebar.

I took the original Cow Patties Logo from the facebook page added some color and edited it to fit into a square (well, actually it's not quite a square but close enough). For my personal blog button I took coordinating colors and images from my template to incorporate into my button. The possibilities are endless, just make sure it's easy to read at 125x125.


Once you have the image you want to use as a button you need to upload it to a hosting site. There are more out there than I can name off but I use http://www.photobucket.com/ for all my photo hosting. It's easy, I like their privacy setting too. I even ((gasp)) pay them extra money for a "Pro" account. I think it's well worth it, but then again I do host a lot of photos, it may not be a good value for you. http://www.tinypic.com/ is another popular one. I will be using PhotoBucket in my examples but as long as you upload to a site that gives you the direct code to your image you'll be able to use it. Places like Picasa are popular but, like I just dealt with late last month, you have to dig around in the embed code for the direct image code which can be a pain.


So, so far we have:
Step 1: Get an image to use as your button, 125x125.

Step 2: Upload that image to an image  hosting site like Photobucket.com


Once you have your image created and hosted continue on...


Step 3: Go into the Dashboard of your blogger blog and click on "Design"

Step 4: On your Page Elements page click "Add a gadget"

Step 5: When the Add a Gadget box pops up select "HTML/JavaScript"

Step 6: Give the box that pops up a title. "Grab our button!" is what we use but you can put in anything, or nothing at all...it's up to you. After you pick  a title paste this code into the box:
 <center><a href=http:// LINK TO YOUR SITE title="TITLE OF YOUR SITE"><img alt="TITLE OF YOUR SITE" src="http:// DIRECT LINK TO YOUR IMAGE" /></a> <center>



</center>


<center><textarea id="code-source" rows="3" name="code-source"><center><a href="http:// LINK TO YOUR SITE"><img border="0" src="http:// DIRECT LINK TO YOUR IMAGE" /></a></center></textarea></center></center>
 
Step 7:  Replace my color coded stuff with your correct information. The direct link of your image will start out with http:// and end with something like .jpg. If you use any other code, like the HTML or image code it will not work. It's very important that you have the entire link and that you do not delete or move any of the " " marks as you're trying to paste inside of them. To make it easy for you I've color coded the different information. Orange is the link to your  site. Looking below you will see the link to the Cow Patties Cloth Diapers blog is in those areas. Green is the title of your site. You'll see ours says Cow Patties Cloth Diapers. Purple is the direct link to your image on the image hosting site. It'll look like this when you're done:

 


































Step 8: Click "SAVE" and look for the tittle of your box. You can move your new box where you want it to be by clicking on it, holding the mouse, and moving. In the image below I was in the process of moving it.

Step 9: When you get it to the position you want it click "View Blog" toward the top of the page and see how it looks. You should see something similar to this:
























Anyone can copy the code in the box, paste it into their blog to get your button that automatically links back to your site. Click and  see...