Saturday, February 27, 2010

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  
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!  


  1. Following you from Follow Each Other over at Mom Blogging Club.
    Hope to see you over at my blog too! :)


  2. You make it look SOOOO easy! lol.
    Following via linkexchange and Mom Bloggers Club! Glad to find you - love your blog!

  3. I have always wanted a button.I think I may spend this weekend working on this,thanks for the tutorial!
    New follower from MBC FFF,feel free to check out my blog!

  4. Thanx for the GIMP lesson and all the info you provide! I'm new to blogging and I will try and create my own buttons too. Your blog is pretty cool, colorful and fun to read! Glad I found your site!

  5. Well done! I also have a copy of button tutorials but get lots of folks who use the wrong link for the image --- pointing to their album display page. It's great that you show the direct link on PhotoBucket!
    WordPress self-hosted would use your tutorial and put the code in a regular text widget.

    Check out my other post for free Wordpress users --- it's tricky but possible: Displaying Grab My Button Code in


I read all of my comments and often respond right back here in the comments section. Go ahead-you know you want to!!