Fabulous & Fun Fridays - How To Make a Grab Button for Your Blog

In an effort to help all of this teams members gain exposure to their businesses, I went on a hunt last week looking for buttons that I could grab to place on this blog.  The hunt ended in only being able to add 2 buttons and one of them was mine! lol   So I brought up the question of whether or not alot of people even know what a grab button is or how to make one.  I was asked if I could do a tutorial teaching those of you who don't know how, how to make one.

This process can seem daunting at first and a little complicated, but don't be scared off by the intimidating coding I think I have figured out a way to simplify everything so that in a few minutes you will all be able to have grab buttons on your own blogs for me and the rest of the world to grab!

To start some of you might still be wondering what exactly I am talking about, so below is a screen shot of my personal grab button on my blog. I'm sure most of you have seen something like this in your blogging travels at some point in time.

So basically all it is, is an image of my logo with a box underneath it with some code in it.  Why it is there, is for people to copy the code and then paste it in a html box on their own blog.  Once they do that only the logo image minus the code box will show up on their blog and when anyone clicks on it they will be taken to my blog.  Why would they want to do that?  Well, there are a couple of reasons.  1.  They are entering my give away and one of the ways of scoring an entry is to grab my button and place it on your blog.  2.  They might just be happy to help promote others on their blog.  The second reason is why I want all of you Etsian Artists who are bloggers to create one of these for yourselves, then I will go around and scoop up all the codes and place your buttons on the team blog in an effort to bring you all more exposure and followers.

Lets get started......

1.  You need your logo uploaded to photo hosting site such as Flickr or Picasa and either of these 2 will work perfectly.  Once your photo is uploaded you will need to locate your image url which will end in .jpg and should look something like this  http://oddballartco.com/web_images/grabbutton.jpg  You can find this url by right clicking on your image, then clicking properties and then copying the image url.  Some sites are upgrading and so the moment your right click on your photo you will get a menu and one of the options will be 'copy image url' and if that is the case you can simply click on that and you will have your image url.

2.  Open a blank word document and paste your image url at the very top of the document.

Now you will also need your blog url so copy and paste or type it directly underneath of your image url in the word document.   Underneath that type the title of your blog or company, for me it is one in the same so this is entirely up to you what title you want to use if they are different.

Now you have the only 3 elements that you will need to enter into this code to make it work for you.  There is actually 6 places that you will need to enter your info and I have color coded it to make it easier for you to find.  Below I am going to give you the generic code with the 6 places color coded and between quotation marks. Now those quotations are crucial for this code to work, DO NOT REMOVE THE QUOTATION MARKS!  You will change everything that is in color and between the quotation marks only!  The easiest way to do this is to simply copy the generic code from this blog post and paste it in your word document underneath the info I had you put at the top.  Then you have everything you need in one place together. To change the info so that you get everything correct simply copy the required info at the top then highlight the correct spot in the code making sure that you DO NOT include the quotations marks and paste the new info in replacing the colored writing between the quotation marks with your info.

Legend...

Your Image Url = GREEN

Your Blog/Web Address = RED

Your Blog/Shop Title = BLUE

The Code....

<center><a href="http://YOUR WEB ADDRESS/" target="_blank" title="BLOG TITLE"><img alt="BLOG TITLE" src="http://IMAGE WEB ADDRESS"/></a> <center>

</center>

<center><textarea id="code-source" rows="3" cols="13" name="code-source"><center><a href="http://YOUR WEB ADDRESS/"><img border="0" src="http://IMAGE WEB ADDRESS"/></a></center></textarea></center> 

Once you have edited this code to work for you, you can copy the entire thing and paste it into an html box on your blog.  Once you have done this you will want to test it to make sure it is working properly. Do not take for granted that even though it looks right, that it is working properly.  There are a few different areas that you will need to test.....

1. Once on your blog you will need to test it as if you are the visitor to your blog who is 'grabbing your button'  So copy the entire code underneath of your image and paste it into yet another html box on your blog (this is just temporary to ensure it is working)  
2. Once you have pasted the second one, it should show up on your blog now as just the button and no code box underneath, if it does, then move on to step 3
3. Now click on the second button and make sure that it links back to your blog when clicked on.  
4. Once you have ensured it is fully functional you can remove the second html box leaving only the first one with the code attached.

Congratulations! You have now created your very first Grab Button and are ready to have your button placed all over the web by your visitors!  Once you are ready send me a convo with your blog link so I can go grab your button and place it on the team blog for you.