How To Make a 'Grab My Button' With Code: Tutorial 2

 Have you ever noticed the cool 'grab my blog' buttons in the sidebars of many of your favorite blogs? I did too, and thought this was a really cool idea. 

So this tutorial is all about making a blog button with code box. It's really pretty simple, and pretty soon you will be sporting a customized blog button in your sidebar too:-D


  I want to reiterate this: I am not an expert, nor do I claim to be.  I am just sharing what works for me, and hopefully what has worked for me, will work for you too:-D

Also, in my first tutorial, which is how to make a blog banner, I used the image manipulation program called Gimp.  We'll continue to use this program, simply because I love it and it's free people!

Soooo, hereee weeee goooo

If you haven't downloaded Gimp yet, go do it.:)

Step 2- Once the program has opened up, go to File, then click on New.

A 'create new image' box will then pop up, and you will then need to input the image size.  A standard blog button is 125 X 125, so that's what I set my image size to.

Click on OK, and you will have a small blank square canvas.  Remember: you can get your images from just about anywhere.  We will be retreiving images and re-sizing them the same way we did in the blog banner tutorial.  If you're unsure of how to do this, check out that page first!

So now I will go to File-->Open as Layers, and find an image.  Once you have selected the image you like, click on Open (at the bottom of the box). Now, your image may be too large.  What you need to do is scale it down so you can actually see it.  This is a screen shot of my image before scaling it down:

 

To scale the image down, go to Layer, then Scale Layer:

This is what it looks like AFTER scaling image down:

 

Go ahead and keep adding layers, text, or what have you to your button.  

  

When you are all done, save your work as a .PNG file.  

It should automatically choose the options 'merge visible layers'.  Then press 'export', and 'save'. 

 

That wasn't so hard now, was it?  You now have a new blog button to show off on your main page:)

How to install the blog button with code:

So you have the blog button, but how do you get it into your blog so others can snag it?  

It's actually very simple. 

First of all, upload your image to a photo hosting site such as Photobucket.com.  

Then, just figure out where you would like to display your code.  For blogger, just go to your dashboard, then click on layout.  You want to then Add a Gadget, and scroll down until you see HTML/JavaScript.  Click on that.  This is where you will be inserting the code.  (I apologize to the wordpress users-I only know my way around blogger!)

So now that's all you have to do is copy and paste the code below:

(just remember to change the red areas to your own information!):

(I couldn't copy and paste it without it actually turning into the REAL box-so I had to input a picture. This is the exact code you will use)

Note:  "the location of you button" will be the direct link. If you're using Photobucket, this is in the bottom left hand corner.  This is what it looks like:

 

If you want to tweak the code to make your code box fit better in your sidebar, you can change the command rows and colums, which show how large the box will be on your blog.  

That's all there is to it!