Make a blog button with a grab box, easy tutorial!

So I decided it was about time to get myself a blog button! {Feel free to swipe it from the sidebar!}
However, there was one problemo with this plan. A lot of the online blog button tutorials are waaaay more complexicated and confusilating than they need to be.
Fortunately I have made a blog button with a friend before, so I got a bit of help from her, and then figured out some of the bugs she had.
So, while most of you probably already know how to do this, I decided to post a tutorial anyways. Just because if you don't know how to do it, finding a good tutorial is a pain. 

_____________________________

1. Design your button. Take a photo, and crop it into a square. Mine is 150 by 150 pixels. That will give you a good size reference. Add your blog title, logo, or whatever you want. You can use pretty much any photo editing program. I used Photoshop to create my button:

2. Post the photo somewhere online. You can post it on flickr, photobucket, your blog, etc. If you do it on your blog, you will have to actually post it. Once it's posted, you can click the photo to view it. Then right click over the photo. There should be an option that says "Copy image URL". Open a word document and paste the URL there for future use.

3. Go to your blogger layout, and click "add a gadget". Add the one titled "Configure HTML/JavaScript."

4. Make a title (mine says "Grab my blog button!"), and then paste this code into the actual gadget:

<center><a href="BLOG URL" target="_blank" title="BLOG TITLE"><a href="BLOG URL"><img src="IMAGE URL" /></a></a> <center>

</center>

<center><textarea id="code-source" rows="3" cols="13" name="code-source"><center><a href="BLOG URL"><a href="BLOG URL"><img src="IMAGE URL" /></a></a></center></textarea></center></center>

5. Fill in your own information. For example, I would put http://paperraindrops.blogspot.com/ as my blog URL, and Paper Raindrops as my blog title. For the Image URL, go back to your word document and copy and paste that in. 

Note: Be sure to fill in your information very carefully. If you delete so much as a quotation mark by accident, it could mess up the whole thing! 

6. Hit save. Now view your blog and hope it works! It should look like this, with a grab box underneath:

7. To test the grab box, copy the HTML from under your new button. Now make a new post draft. Click the HTML button on your draft (right next to the "compose" button), and paste the grab box HTML in. Now click compose. If your grab box HTML works, you should see your blog button photo! Now you can delete that draft, knowing that the code will work for anyone who wants to share your button.

Hope this works for you! 

Let me know if you have any questions!