Blogging 101: How to Make a Grab My Button Thing

One of the top things people always want to know when they start blogging it “How do I make one of those grabby button things?”  It’s really simple and only takes about 10 minutes.  Be sure that if you upload to an outside source you grab the location HTML not the image HTML.

Step 1: Place a copy of your button so people will know what they are “grabbing”.


If you don’t already have this done, you will have to  create & upload your button either to your blog images file or an outside source such as photobucket.

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

Below is how mine looks:

<div align=”center”> <a href=”http://frugalreality.com” target=”_blank”><img src=”http://frugalreality.com/wp-content/uploads/2011/11/fr-new-button.jpg”></a> </div>

 

Step 2: Making the  Text Box with the Code for your Button

This is always where I’ve had the most trouble.  If you’ll look closely the code in Step 1 is very similar to Step 2 EXCEPT you are “telling” the code it needs to be a text box not a graphic.

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

Notice where the codes has rows=”6″ cols=”19″

The first number (rows) determines how tall the box will be. The second number (cols) determines how wide the textbox is.

 

Below is how mine looks.

<div align=””>
<form><textarea rows=”6″ cols=”12″ readonly=”readonly”><a href=”http://frugalreality.com” target=”_blank”><img src=”http://frugalreality.com” target=”_blank”><img src=”http://frugalreality.com/wp-content/uploads/2011/11/fr-new-button.jpg”></a></textarea></form>
</div>

 

You will also notice I took the center part out as well.

Leave a Comment:

All fields with “*” are required

Heather

You’re welcome! Anything else you’ve been curious about?

Ashley H

Thanks for posting this! I was wondering how to even start making a button for my new blog.

Leave a Comment:

All fields with “*” are required