I’ve seen these all over the place – you know where they show you a picture of their button and then in a little scrolly box underneath, you can copy and paste the html language on your blog so that you can insert their button, linked to their site on your blog. In particular I’ve seen this on contest blogs where you can earn an extra entry to their contests if you place their button on your site. I got this great idea that I would add this to my blog since I had created the button for MomDot, but it proved a bigger challenge than I expected.  I consider myself a pretty good web searcher, but I simply could not find instructions for this. The problem? I simply didn’t know what these were called so I had no idea what to search for.  I finally stumbled upon instructions though, and it’s now here!  Yep – look over at the left side of my blog, and you’ll see my handy dandy “Grab My Button” thingy! (yea, even after finding instructions and creating it, I still don’t know what to call it.)

Since I had such a hard time finding it, I wanted to be sure to share the process with my readers in case you are wanting to add this to your site.

How to Add “Grab My Button” To Your Sidebar (or even a web post)

**These instructions include the HTML language for this task.  In WordPress, you could type this into a post in the HTML view or add to your sidebar by adding a textbox and including the entire code. If you use something other than WordPress, I’m not sure where’d you would place this code, but you should still be able to use the code whereever you can post html code and have it shown on your site**

Step 1: Add a picture of you button (so people know what they are grabbing)
To do this, you’ll create and upload your button either to your blog images file or an outside source such as photobucket.  You’ll need to know the exact location of your image.  You probably know this code, but just in case, the HTML for inserting the button linked back to your site:

<div align=”center”>
<a href=”http://www.YOURWEBSITE.com” target=”_blank”><img src=”http://www.THELOCATIONOFYOURBUTTON.jpg”></a>
</div>:

For an example, this is what mine looks like:

<div align=”center”> <a href=”http://www.allaboutkimberly.com” target=”_blank”><img src=”http://www.allaboutkimberly.com/wp-content/uploads/2008/07/aakbutton.jpg”></a> </div>

Step 2: Adding a Text Box with the Code for your Button
This is where I was running into problems. I didn’t realize it was a text box/area. The code looks almost identical to the code you used above except you have to surround it with the text box/area html <form><textarea>. A complete example:

<div align=”center”>
<form><textarea rows=”6″ cols=”19″ readonly=”readonly”><a href=”http://www.YOURWEBSITE.com” target=”_blank”><img src=”www.THELOCATIONOFYOURBUTTON.jpg”></a></textarea></form>
</div>

The command rows and cols defines how large the box will be. You can change these numbers as you see fit to adjust the size of your text box. The first number (rows) defines how tall the box will be, and the second number (cols) defines how wide the textbox is. The next part (readonly) is optional. You could delete the entire command and it would still function; however, I chose to include it as it prevents someone from accidentally hitting a button and changing the code during the copy/paste process. The <ahref….> is what actually appears in the text box.  Here is my actual instructions:

<div align=”center”>
<form><textarea rows=”6″ cols=”19″ readonly=”readonly”><a href=”http://www.allaboutkimberly.com” target=”_blank”><img src=”www.allaboutkimberly.com/wp-content/uploads/2008/07/aakbutton.jpg”></a></textarea></form>
</div>

When you put all of this together, this is how it looks,

Pretty simple, huh?  I thought so.  If any of this isn’t clear when you go to apply it, please let me know. I’d be glad to help (and modify my instructions for future users).

Reference: Tricks for New Bloggers

July 4, 2009 Update: Having Problems?  If you are having problems making this work, you are free to contact me, but try this first!  Copy and paste code into Notepad BEFORE you paste into your site.  It is important that the quotation marks (“) go straight up and down – not at an angle.  I can not figure out how to undo the angles on this page so you may have problems copying and pasting straight from it.  If you paste to a text editor like Notepad first, you should be ok.

Guess what? I decided to create another tutorial.  Would you like your favorite website buttons in your sidebars to scroll so they don’t take up so much space?  Well check out my How to Create Scrolling Textboxes tutorial.