How to Make Blog Buttons Grab-able

I've had several people ask me about how to make blog buttons, and especially how to make blog buttons "grab-able". It's pretty easy. Let me show you how!

First you need an image editing program. I use Pixelmator, but there are many free alternatives on the web, such as Pixlr or FotoFlexer, or you could use something more advanced, like Photoshop.

I'll give instructions using Pixelmator, but it should be similar processes for other programs.

First, open a new project. Decide what size button you want and enter those dimensions. Mine is going to be 300x75 pixels.

 

Next, decide on a background color and fill it in. You can add variants to the color, such as stripes, a sunbeam, or other artistic modifications.

Add an image if you like. It should be something that represents you and your blog. Try to tie it in with your existing theme so that people recognize your brand when they see it elsewhere.

Next add text to your button. Usually the name of your blog works, or you can use a phrase or saying too. Remember that there's not much space on a button, so keep it short!

Save your button. Make sure to keep a .jpg or .png copy, which is what you'll need to use it online.

Upload your photo to a photo sharing site like Flickr or Photobucket. This will give your photo a permanent web address. Now your blog button is created and uploaded, so it's time to make it "grab-able"!

Make an HMTL widget in your blog's sidebar. Open the HMTL browser and copy/paste the following HTML into it. The all-caps words will be where you enter your own information.

<div align="”center”">
<a href="YOURBLOGADDRESS" target="”_blank”"><img src="YOURIMAGEADDRESS"/></a>
</div>
<div align="”center”">
<form><textarea rows="”6″" cols="”19″" readonly="”readonly”"><a href="YOURBLOGADDRESS" target="”_blank”"><img src="YOURIMAGEADDRESS"/></a></textarea></form>
</div> 

Paste your image's web address and your blog's web address into the appropriate spots. Note that there are two places to enter each address. When you're done, save your work and admire your new grabable blog button! It should look something like this:

<a href="http://livingthecreativelife.blogspot.com/" mce_href="http://livingthecreativelife.blogspot.com/" target="”_blank”"><img src="http://i1216.photobucket.com/albums/dd378/desertrose0601/JustJenTestButton.jpg" mce_src="http://i1216.photobucket.com/albums/dd378/desertrose0601/JustJenTestButton2.jpg"/></a>