DIY GRAB BUTTON Tutorial

Want to make one of these to promote YOUR blog?

<center><a href="http://www.stilllearninglife.com" target="_blank"><img alt="Stil Learning Life" src=" http://i67.photobucket.com/albums/h314/brookefuller0807/blogsample.jpg "/></a></center>

When I wanted to make a "Grab Button Box" I found it very difficult to find complete instructions on how to do it. I found bits and pieces here and there, but nothing completely coherent. I am hoping this tutorial will easy to follow with your own "Grab button" as an end result!

PLEASE do not be alarmed by the length of these instructions. The length of these instructions is not a reflection of the difficulty of the tutorial. I have tried to be extremely thorough so there is no confusion.

First off, what IS a "Grab Button Box?" I am talking about that button (usually square) you see on a blog with a tiny box below it that has a bunch of code (as you can see above). If you cut and paste the code into your blog, that button and a link to that blog you cut and pasted it from will be apart of YOUR blog. In otherwords, the button allows YOU an opportunity to promote your blog with an image and direct link that can be hosted on your friends blogs, or by people that just like your blog.

THIS tutorial teaches you how to make YOUR OWN button with the code. You can then feature it on your own blog for others to cut and paste and get the word out about your blog or website. 

OUTLINE:
1. Edit and create a square 125 X 125 image to represent your blog.
2. Upload the image to Photobucket to host and acquire a direct link.
3. Replace your direct link, blog name and address into the code I have provided.
4. Open an HTML page gadgets in blogger and copy your code.

Let's get to it!

1. Decide what image you will use for your button. Keep in mind this button will be small, so tiny details won't show up. Using your own photo program choose an image, and add a title or your blogs name to your image if you wish and resize the image to 125x125 in size. Skip to step 2 if you have completed this task. IF you have never done this before follow the steps for PICNIK a free editing program online listed below.

___________________________________________________

PICNIK Instructions:

1. Go to PICNIK.

2. Click "upload a photo."

3. Choose the file from your computer that has your image and upload it. It will now open in picnik. Click CROP. Click "no constraints" and highlight/click "square." Now use the editing box that appears to pick what square portion of your photo will become the button. Now click "apply." Your photo will become a cropped square. 

4. If you wish to add text or your blog name, use the "TEXT" tab at the top and click on it. You will see a rectangular box that says "type here and click add to place text" Pretty self explanatory. You can play with the fonts and size and drag the text box you create around.

5. Now go back to the tab at the upper left "BASIC EDITS" Click "RESIZE" and put the dimensions 125 X 125 in the boxes. Click "APPLY" 

6. Your image should become very tiny. Now click "SAVE AND SHARE" at the top. Click "SAVE PHOTO" and save to your computer (remember where you save it). 

__________________________________________________

2. Go to PHOTOBUCKET. Either sign in or create an account. You will need to use this site or one like it to house your image online to get a direct link to enter into the code coming up. Once open, click "UPLOAD" and then "SELECT PHOTOS AND VIDEOS". Upload the photo you saved on your computer from PICNIK. When the photo loads, click "view album"
3. Click on the box that says "DIRECT LINK" (as shown below) You will cut and paste this code into a blank document like in the next image.

Then cut and paste the color-coded code found below in the GRAB BUTTON TUTORIAL into the document as well, a few lines below your DIRECT LINK code.

4. Continue with the instructions below. I had to place them in a SCRIBD doc so that the code wouldn't get jumbled up in this post! You are almost done!

Grab Button Tutorial