Tuesday, August 4, 2009

Tutorial: How to Make your Own Blog Button

I don't know about you, but this was one of the first things I wanted to learn! A bunch of other blogs that I saw had them, and I wanted one too! It's kind of hard to find a site that is willing to teach you these things too. So here is the way I like to do it.

First off, you are going to need some kind of scrapbooking or image manipulation program (Photoshop or Photoshop Elements), even Paint will work if you are desperate. But I want to give you a few links to some great programs you can download for FREE.

  • Scrapbook Flair has a simple scrapbooking program that you can download and design your own buttons on. Click here for downloading information. I think you have to register with them, but it is a free membership -- and the benefits are so worth it. They have some of my favorite scrapbook pages and elements for free downloads.
  • Gimp is a Free image manipulation program not much different then Photoshop Elements. And it is FREE. I used this program A LOT before I finally got Elements. You can download it here.
  • Paint.net -- I haven't personally tried this program, but I have heard great things about it. It is also free.
I will do this tutorial in Gimp, for your benifit. The reason I prefer Gimp and Photoshop is because it is easy to resize images. And you will need to do that.

Also, before I start, you will need to be a member of an online image host. What is that? Well, it is a site that you can download your photos or any graphic creation to and it will give it its own URL (web address). Most image hosts are free and easy to do. I really like photobucket. It seems to be the most popular. You can check it out here.

Okay, are you ready? Here we go!

1. Create your button in whatever program you choose. However, you are going to need to be able to transfer it into a program that can resize your creation. Gimp is great for this. In the following picture you can see my design in Gimp. But I can't have my button that big!
2. You need to resize your creation. If you are in Gimp, go to "Image", then "Scale Image". If you are using Photoshop whatever, go to "Image", then "Resize" then "Resize Image." Now since I am dealing with pixels when I do my HTML coding. I like to use them when resizing. I also know, that most sidebars on other blogs are around 200 pixels wide. (Mine is 205). I like to make my button 190 pixels wide (don't worry about the height it will adjust automatically). So change your setting to look like this:


Photoshop Elements:Then click "scale" or "okay". Your button will look little now. Save it as a jpg file.

3. Now you will need to load it onto a photo online host, like Photobucket. Right after it loads, click on Return to Album and you will see your button there. Click on it! You will now see a box with all kinds of codes on them. Now you will have two choices:
  1. If you want to just post the picture or button on your site, just copy the HTML code and paste it in a HTML/ Java Script gadget and put it wherever you want. Or...
  2. If you want to make a grab this button box for others to take and put on their site you will need to follow these steps:
-Copy the HTML code. I like to paste it in Word so I can manipulate it easy before I put it on my blog.
-Now this code will show the picture on your blog, but will link back to photobucket. You don't want that, you want it to link to YOUR blog. It will look something like this:

now, where it says: href="http://s586.photobucket.com/albums/ss308/nutsinanutshell/?action=view&current=iheartcomments003.jpg" You need to replace the http: part with your blog address so it looks like this: href="http://yourblog.blogspot.com"

It will now look like this:

-Great! Now this button will link to your site. Tip: If you want your button to be centered, type at the begining of this code and at the end type .

-Next you will need to add the text box below so your friends can copy your code. Copy and paste the following underneath the code above and fill in the blanks with your own info. (Note: where it says src="" you will need to copy and paste the Direct Link of your picture between the quotes. You can get that on photobucket right next to where you got the HTML code.)

-Tip: make sure you don't erase any of the punctuation! Or it might not work properly.

Now your whole code should look something like this: (this is for my button I made for this tutorial.

Now you want to copy and paste your finished code into an HTML/ Java Script gadget. Place it where you want it and it will look like this:

Yay! You did it! I knew you could! If you like this button, go ahead and grab it for your site! If you have any questions or notice any typos on my part, leave me a comment and let me know! Thanks!!


Our Family said...

Yay! I can't wait to try this!

Our Family said...

Yes! It worked! Thanks again, Cat.

Tammy said...

Thanks again Cat...this was a great tool and it worked perfectly.

Beckeesdeals said...

Just used your awesome tutorial and made my first button! YEAH!! Thanks for your help!!

The Tight-Fisted Penny said...

Thank you SOOOO much for your tutorial. I've been round and round trying to figure out how to make one! www.thetightfistedpenny.com

Hilarious Homemaker said...

Thanks so much Cat! I haven't been able to find any tutorial as great as yours. You are Awesome!

Thanni said...

This was a piece of cake thanks to you!! :)..I made my first set of buttons - YAY! :D

Blog Widget by LinkWithin