How to make your own "Grab a button"

I made my button; let me show you how to make yours...

Disclaimer: This guide is for blogger blogspots; The second button does link to my wordpress blog; however I have not tried to post the button to my wordpress account yet (I will let you know how that goes). This is how I made my grab button but there are probably several other ways to go about making them. If you know of a better way please feel free to let me know in the comments section. ♥ Thanks ♥

What is "A Grab Button"?
They are very similar to a blog roll. It is essentially a shortcut to your blog. You can design it anyway that you want and if your followers, friends or fellow button collectors choose to they can post them on their website, blog sidebar or page like this one: I ♥ Buttons. Please see below (and feel free to grab my buttons) for an example of "A Grab Button":

<a <SPAN style="BACKGROUND: yellow" class=goog-spellcheck-word>href</SPAN>="http://<SPAN style="BACKGROUND: yellow" class=goog-spellcheck-word>thepaulohana</SPAN>.<SPAN style="BACKGROUND: yellow" class=goog-spellcheck-word>blogspot</SPAN>.com" target="_blank"><<SPAN style="BACKGROUND: yellow" class=goog-spellcheck-word>img</SPAN> alt="Impulse Imagination" <SPAN style="BACKGROUND: yellow" class=goog-spellcheck-word>src</SPAN>="http://i1179.<SPAN style="BACKGROUND: yellow" class=goog-spellcheck-word>photobucket</SPAN>.com/albums/x390/<SPAN style="BACKGROUND: yellow" class=goog-spellcheck-word>christina</SPAN>_paul2/button.<SPAN style="BACKGROUND: yellow" class=goog-spellcheck-word>png</SPAN>"/></a>

<a <SPAN style="BACKGROUND: yellow" class=goog-spellcheck-word>href</SPAN>="http://<SPAN style="BACKGROUND: yellow" class=goog-spellcheck-word>thepaulohana</SPAN>.<SPAN style="BACKGROUND: yellow" class=goog-spellcheck-word>wordpress</SPAN>.com" target="_blank"><<SPAN style="BACKGROUND: yellow" class=goog-spellcheck-word>img</SPAN> alt="Welcome to my World" <SPAN style="BACKGROUND: yellow" class=goog-spellcheck-word>src</SPAN>="http://i1179.<SPAN style="BACKGROUND: yellow" class=goog-spellcheck-word>photobucket</SPAN>.com/albums/x390/<SPAN style="BACKGROUND: yellow" class=goog-spellcheck-word>christina</SPAN>_paul2/w2mw.<SPAN style="BACKGROUND: yellow" class=goog-spellcheck-word>gif</SPAN>"/></a>

How do I make my own Grab Button?

I made mine in photoshop but you could probably use any image editor that allows you to resize the canvas.

Step 1: Open photoshop (or what ever image editor that you are going to use). 

Resize your canvas to 125 x 125 pixels,

In photoshop you can do this under Image->Resize->Canvas Size.

Step 2: Get creative and design your image. For inspiration please see:  I ♥ Buttons. After you are done with your design, remember where you saved it. Go to photobucket.com. Sign in if you have an account or sign up if you do not (it is free). Upload your design. Take advantage of some of the additional features photobucket.com offers you within the edit options. 

How do I add the Grab Button to my blog?

Side-note: You can add other bloggers grab buttons to your post, page or side bar by highlighting all the text in the scroll box located underneath their image, copying it (ctrl+c) and pasting it (ctrl+v):

a) Posting it onto your sidebar:

Go to your dashboard then your page elements -> add a gadget -> HTML/Java Script. In the new gadget box paste the code and click save. 

b) Posting in onto a new post or page:

Add a new post or page and click the "edit html" tab, paste the code; preview it and click publish post/page.

The code that you are posting should look something like this:

<a href="http://thepaulohana.blogspot.com" target="_blank"><img alt="Impulse Imagination" src="http://i1179.photobucket.com/albums/x390/christina_paul2/button.png"/></a>

  

Step 3: Open another internet browsing window. Go to your blogger dashboard. If you want post your grab button onto your blog side-bar select the Design tab then click on page elements -> add a gadget->HTML/Java Script. If you would like to put it in a page or a post simply select the "edit html" tab in your new post or new page. Highlight and copy the whole multi-colored script below. Paste it in your new post, page or gadget. The blue code is NOT going to change. The green code is where you are going to paste your photobucket image's "html code". The yellow code is where you type in your URL address for your blog. The gray code is where you will type in your blog's title. The pink code is where you will paste your photobucket image's "Direct link". Remember to click save or publish and there you go; you've learned how to make your own button and add it to your blog (as well as learnt how to grab other bloggers buttons as well). 

This is what my script looks like:

<div align="center">

<a href="http://s1179.photobucket.com/albums/x390/christina_paul2/?action=view&amp;current=button.png" target="_blank"><img src="http://i1179.photobucket.com/albums/x390/christina_paul2/button.png" border="0" alt="Photobucket" /></a>

</div> <div align="center"> <form><textarea rows="6" cols="20">

<a href="http://thepaulohana.blogspot.com" target="_blank"><img alt="Impulse Imagination" src="http://i1179.photobucket.com/albums/x390/christina_paul2/button.png"/></a></textarea></form> </div>

***Wordpress update: The buttons posted to the posts and pages of my wordpress blog just fine. The image and link works the way that it supposed to with the exception of the scroll box. Take a look for yourself: http://thepaulohana.wordpress.com/. I haven't figured out how to add it into the widget sidebar because they don't offer you the option of a script widget, at least in the free version.