Blogging 101| How to Make a Blog Button With Grab Box

I have recently helped a few fellow bloggers make a button with a grab box.  In the beginning I had a hard time figuring this out!  It took trial and erro to get my blog button and grab box to come out correctly.  Most blogger want a button with a grab box, so i wanted to share how to make a button with grab box.

Decorate and size your image you wish to use for you button. I use Photbucket for this.  it’s free and where I keep all my photo’s.  If you are not familiar with Photobucket, it’s fun to play with.  Keep in mind that the blog button is going to be square.

Now that your image is resized, you can add effect, letters, boarders, anything you wish.  Photobucket has tons of options to help you build an awesome button.  Try to make your button represent your blog or event.  Keep it nice and simple, it’s small and you want people to be able to read it.

Now resize your button. Standard size is 125 x 125, but it’s fine to make it a little bigger.  It’s whatever works for you and your blog.  Now you should have a decorated resized image.  Save your image.

Here comes the coding.  Copy and paste the following into a blank word document for the time being.

This is what your code will look like.  You should replace everything with your own information. The link in red should be the direct link to your photo and change the link in green to your blog url.

<textarea rows=”3″ cols=”17″>Your Blog url“><img src=”Direct Link to Image” border=”0″>textarea>

You want to be very careful not to delete anything while doing it.  Another thing for some reason if you are trying to put on a WordPress post or page, change the page to html rather than visual and do not change back to visual, just publish.  For some reason if you change back to visual it makes a mess of things and the button will not come out correctly.

Ignore that I have placed [ where the < used to be this is just so you are able to see what the finished code should look like without it changing to a finished button with grab box in the post.

[center><img src="http://i1110.photobucket.com/albums/h445/jenniferw777/Blog%20Buttons/badge.png" border="0"><textarea rows="3" cols="17"][a href="http://jensblahblahblog.com"][img src="http://i1110.photobucket.com/albums/h445/jenniferw777/Blog%20Buttons/badge.png" border="0"></a></textarea][/center]

If everything looks good we are ready to copy and past it into your blog as html code.  Check it out, you should now have a blog button with a grab box!

If everything was done correctly you should end up with an awesome blog button with a grab box. Hopefully completely finished! Hopefully it has turned out amazing!

<a href="http://jennsblahblahblog.com"><img src="http://i2.wp.com/i1110.photobucket.com/albums/h445/jenniferw777/Blog%20Buttons/badge.png" border="0" data-recalc-dims="1"></a>

Likes It, Check Out These:

Earn Money Blogging With Buy Blog Reviews Blogging 101 | Things to Think About Before You Start a Blog Earn Money Blogging With LinkWorth | Monetize Your Blog Top 5 WordPress Plugins for StumbleUpon Button