Grab-Button Tutorial

In 4 easy Steps

Having a grab button is a really handy way to share your brand and grow your blog.  If you don't have one yet get ready to be amazed at how fast and easy you can make one.  If you do have one you still might learn a thing or two that you didn't know about buttons and how they work, including how to re-size, center and group them together into one gadget.......

1. Make a button........designing your button can be hardest part of the process.
I use photo shop elements 10 to create my buttons but there are lots of online photo editing sites you can use Pic Monkey is a good one. 
(a) Size...... 150 to 200 square or round is best.  Just remember to use a translucent back ground on the round  one's or they will appear to have a white box around them.  Not every ones blog has a white background.
(b) Text.......pick one that is easy to read as the buttons are small......also make sure that the text color stands out from the background color..........and that all the important info is there, your blogs name, the day of your party etc.......

2. Now take your button to your favorite picture hosting site I use Picasa.
(a) Upload the button picture and make sure you are set to public.  While your there check your usage if you run out of space your button will no longer show up.  That's why I use Picasa because I pay $20 a year for space from Google for my blog so I know I will not run out.  Picasa is a Google product.
(b)Now select your button and click Link to this Photo>select original size>image only no link>and high light and copy the embed image code.

3.  Next go to MyCoolRealm and make your grab box.  
Once your there you will see the following  info:
Your website title>     CountryMommaCooks
Your wesite/blog url> http://www.countrymommacooks.com
Your Image url>https://lh5.googleusercontent.com/-y4MO4ORj-sk/UAQXmDpQ-qI/AAAAAAAADJc/o9TRQjiF2pk/s800/farmers-wife-button.jpg(this is what you copied from Picasa)
Container Type> click textera for blogger and Pre for Wordpress.
Container boarder, color and font can be left blank.
Container height and width set to auto.
Open to a new window click yes because it's the nice thing to do seeing how someone is graciously adding your button to their site.

4. Get the code. 
Hit preview and if your button looks OK then click get code.  Now paste that code into a Java Script gadget and add it to your side bar.  If you want to add it to a page then click the HTML button on your post edit page and place it where you want it then hit compose and it should be there.

<div align="center"> <a href="http://www.countrymommacooks.com" title="CountryMommaCooks" target="_blank"><img src="https://lh5.googleusercontent.com/-y4MO4ORj-sk/UAQXmDpQ-qI/AAAAAAAADJc/o9TRQjiF2pk/s800/farmers-wife-button.jpg" alt="CountryMommaCooks" style="border:none;" /></a></div>

Button tips

Once you start collecting buttons you'll want to make them look neat and tidy here's a few things you can do to the codes of the buttons you want to add to your blog.

1.  How to center a button......place this code before and after the button code <center> button code here</center>

2.  How to change the size of a button......place this code right after the .jpeg" or .png" height="150" width="150"(try not to change the size to drastically or you will stretch the pixels and distort the image.)

3.  How to make a button open to a new window.....place this code after the <a href= "http:// blog name" target="_blank" and before the >

4. How to group buttons together in one Java Script gadget.... create the following table using the <tr> table row and <td> table data codes:

This makes one row with two buttons to make more rows just repeat the code....to make it three or more wide just keep adding <td></td> between the <tr></tr> tags.

If any of your buttons have a <center> code remove it or the buttons will not align up side by side.  Make sure your buttons are all the same size so it will look even.  This is how I set up the buttons and ads on my side bar.  Try not to put to many in one Java Script Gadget just because it can be hard to find a problem should you have one.

I hope this post has been helpful to you, I'm still learning new things every day and what I learned I learned from other bloggers willing to pass on their know how.......If you want to build a complicated table with headers and lines and specific spacing google Table Generator there are tons of free sites out there that are easy to use.  If you have any tips you would like to add please share them in a comment. 

I got the cool papers and stitches for my button at My Memories click the link below to enter

Shared at the wonderful Link Parties found Here

Thanks to the following Bloggers for featuring or sharing this post: