How to Make Your Own Blog Button

One of the best ways to get your blog noticed is to make a blog button. A blog button is a small image that fits in your sidebar that gives the title of your blog and when clicked, links directly to your blog. It really isn't very helpful to put your button on your own blog since anyone that sees it is already at your blog. However, if you put the right HTML code below your button, your readers can copy the code, paste it onto the sidebar of their blog and have your button show up on their blog. It's basically free advertising. Here's an example of mine:

<center><a href=http://www.blogdesignsbydani.com/><img src="http://bdbd.blogdesignsbydani.com/Dani%20Button.png"/></a></center>

Want to learn how to make one yourself?

To start, you will need some type of graphics editing software. I usually use Photoshop, but this tutorial will be using Pixlr, a free online program that is quite comparable to Photoshop. (You do not have to download any software to use Pixlr.)

Remember to click on an image to enlarge it.

1. Go to http://pixlr.com. Click "Open Photo Editor".
2. Click "Create a New Image" from the pop-up screen.
3. A window will pop-up allowing you to choose the size of your image. This is up to you. My button is 125 x 125 pixels. If you want something more rectangular, you could do 150 x 100 pixels as you see below:

Click OK and your new blank image will open.

4. This next part is up to you. You can design your button however you like. I do suggest that you make your button match or at least be similar to your blog header or overall blog design. This is an advertisement, so show them on your button what they can expect to see on your blog.

If you do not need help with the design, skip to step 5.

If you would like help, follow me as I create a button for a fishing blog.

For this design, I used a digital scrapbook kit by Crazy-4-Monograms called "Big Catch". To add elements from her kit, I did the following:

4a. Click "File" (from the black menu at the top) and then "Open Image" (Ctrl+O). Select the image you would like to use in your design. Repeat this for all of the images you would like to use on your button. Here's what you might see:

You may need to rearrange your windows so that you can see your blank button image. (Use the Navigator box to zoom in and out of your images. Just slide the lever to the left or right. Also, use the bottom right corner to resize your image windows.)

4b. Notice that my fishing button has a thin blue border around it. To get this, I filled the first layer on my button with the blue color you see below. To do this, click on the Paintbucket tool and click anywhere on your image.

  To choose the color you are using to fill the background, click on the big color rectangle. A window will pop-up allowing you to change the color. Click anywhere in the outer circle to change the hue (the color). Click anywhere in the middle diamond to change the saturation (how light or dark that color is). When you are done, click OK.

You will have to click on your image with the Paintbucket tool for your background to match the new color you chose.

4c.  Now you will need to transfer your images one by one onto your button image. Each image will create a separate layer on your button image. The Layers box will show you each of the layers as we add them.

I'm going to start with my wavy blue paper. To copy it to my button, I need to select the window with the wavy blue paper and click "Edit" and then "Select All" (or Ctrl+A). Once it is selected, choose "Edit" and then "Copy" (or Ctrl+C).

Now go back to your button image. Click "Edit" and then "Paste" (or Ctrl+V). The wavy background should appear on the image and as a separate layer in your Layers Panel.

4d. Because the original wavy paper was so much bigger than my button, the pattern shows up way to big for my button. To shrink it down, click "Edit" and then "Free Transform" (or Ctrl+T). You should see a box around your entire wavy paper image with a little blue square in the top left corner. Hold your mouse over the blue square until you see a double arrow. Click with the double arrow and drag your image down until it is small enough to fit in your screen. You may need to slide it up and then re-size it again.

Make sure that you use only the corners to adjust the size. Otherwise you will distort the image. If you find that the shape does not match the shape of your button, i.e. it is too long on one side, you can cut out the part you don't want.

I moved the wavy pattern with my arrow keys on the keyboard until it was positioned so that my background color showed up around the edges.

4e. To trim the bottom of my wavy pattern, I clicked on the Marquee tool and then clicked and dragged to make a rectangle on the bottom of my image where I want to cut off the pattern.

 Once it is selected (dotted lines are in place), click Delete. To remove the selection, click "Edit" and then "Deselect All" (or Ctrl+D).

4f. The steps to add all of your other images are pretty much the same. However, let me show you how to add effects like shadows. Below you can see that I have added all of my graphics. I now want to add a shadow on the fish to make it stand out. With my fish layer selected, I am going to click on the "Layer Styles" icon at the bottom of the Layers box. It is a square with a star in the corner.

A window will pop-up. To change the Drop Shadow, click on "Drop Shadow" and adjust the levels to your liking. When done, click "OK".

Your button is now done and ready to be saved!

5. To save your button in Pixlr, go to "File" and then "Save". Save it to your Computer, Enter a name for your button and then choose a format. I recommend saving your image twice. The first time, save it as a PXD (a layered Pixlr image). This saves all the layers and styles that you added to your image. The second time, save it as a JPEG. This will flatten the image (remove all the layers) which you need to put it on your blog. (Once you hit OK, find a folder on your computer to save it to.)

 

6. Before we can post this button to your blog, you need to upload it to the web. To do this, you need an image hosting site. Photobucket is a great image hosting site that is free and gives you plenty of storage. Set-up your account by following the instructions on their site. Once you are logged in, click the green "Upload now" button. Click the green button "Select photos and videos" and Browse to find your jpg file. When the image is uploaded, click the small box next to the file name so that there is a check mark. Then click "Choose action" and select "Generate link codes for selected".

 A window will pop-up. Click in the box that says "Direct link". This will copy the link code so that you can paste it in the next step.

(If you accidentally saved the image before getting the link code and you are now in your album, hover your mouse over your image until a list of options appears below the image. Click the code next to "Direct Link". Clicking this automatically copies the link for you.)

7. Time to go back to your blog. Go to your Design page from your Blogger Dashboard.  Click "Add a Gadget" from your sidebar. In the pop-up window, choose "HTML/JavaScript".

Paste the following code, changing the part in red to match your blog button codes.


<center><a href="Your Blog Address"><img src="Your Direct Link (the code you pasted from Photobucket)"/></a></center><br/>
<center><div style="border: 3px solid black; overflow: auto; height:
125px; width: 125px; color: black; background-color: white;"> &lt;center&gt;&lt;a href="Your Blog Address"/&gt;&lt;img src="Your Direct Link (the code you pasted from Photobucket)"&gt;&lt;/a&gt;&lt;/center&gt;</div></center>

Here's what it would look like if for my blog:

 Click "Save" and then "View Blog".

Your button appears with an HTML code box below it for others to use to place your button on their blog!

Did this work for you? Let me know how you did!