Tutorial- How to Make a Grab Button

Taking a detour from my usual posting topics, I'll address a technical issue momentarily...

Kai recently pointed out that a great number of bloggers don't have buttons for people to grab and stick on their blogs. I never made it a point to make a one because I don't put other people's buttons on my blog (so why would they want mine?). But it is a good idea to make one for the 'blog button grabbers' even if you don't partake in button sharing.  Anything that promotes your blog is a good thing, right?

I found that making a grab button isn't as easy as plugging in your information to one of the 'blogger gadgets' (or at least I didn't see any availabe). So here is a (hopefully) easy and quick tutorial on how to make a grab button.

Grab Button- an image of your button with a corresponding text box containing 

the button's html code that users will copy and paste onto their website.

1. Make your button image and upload it to an image hosting site, like photobucket. (For reference, my image is 220 wide x 116 tall.)

2. From the Blogger dashboard, go into the "Design" tab and click "add a gadget" on your sidebar then choose the "HTML/JavaScript" one.

3. Enter the code below, changing the sample info in blue to your info:

Copy the code here:

<img src="http://i283.photobucket.com/albums/kk297/hahaha182bucket/grabbutton200copy.jpg" /><br /><textarea cols="23" rows="3"><a href="http://sprinklesinsprings.blogspot.com/"><img src="http://i283.photobucket.com/albums/kk297/hahaha182bucket/grabbutton200copy.jpg" alt="SIS grab button" width="220" height="116" /></a>

(and add the "textarea" bit on the end as shown on the image)

•  The direct link to your image (from photobucket) will be entered twice. Once as the actual image that shows up, and then second in the text box in the form of an html code.
• After the "a href" is where your website url goes.
• After the "alt=" is the unique name you give to the button. (From this, you're supposed to be able to track (on google) who picks up your button and uses it.)
• If your image is the same size as mine, you can leave everything else how it is. Otherwise, go ahead and change the 'width' and 'height' size to match your image, also the 'cols' and 'rows'. ('Cols' is how many characters wide the text box is, and 'rows' is how many lines of text you have showing in the box.)

4. After you make the code and enter it into the "HTML/JavaScript" gadget, save it and make sure everything is working. You're done!

-----------------------------------------------------------------------

Hopefully I helped at least one person (and didn't confuse you terribly)!  

Let me know in the comments if I left anything out or if you need more clarification.

xx Kara