Tutorial: How to make your own blog button

Did you know that if your blog does not have a button, you are missing out on alot of opportunities  that can grow your blog, for free?

If your blog has a button, does it have the five features for success?

Did you know it is easy to make your own temporary buttons that keep your giveaways on your blog front and center during their duration, by linking up a photo in your sidebar (that can be centered) with the direct post where people can enter your giveaway? Making your giveaway easy for people to find and enter while you still add great content and posts?

Why does your blog need a button:

1. Brand recognition
This is important if you are wanting to grow your blog. Your brand is what your blog is about. The blog name, design, tagline and button all contribute to your blog's brand recognition. 

2.  Link Ups
If you hold link ups, having a link up button is a great way to have participants advertise your link up or site

3. Growing your Blog
If you want to purchase advertising on another blog, you will need a button for them to display in their sidebar

4. People want to share things they love
Having a button (along with a code they can copy and paste) makes it easier for them to post your blog button on their blog to share with their readership. A good blogger knows that being able to provide their readers sources for great information is just as important as providing that information. A good blogger is a generous blogger. A blog button allows people to be generous with their readers by sharing the information on your blog.

A good blog button has 5 features:

1. Is sized 125 x 125 (or very close too), the standard size for all blog advertising sidebars
2. Includes the name of your blog (or etsy shop)
3. Stands out in a good way
4. Evokes the mood, idea or aesthetic of what your blog is about.
5. Evokes curiosity or a desire to learn more by clicking it to see where it takes you.

To make your own blog button, you need 4 things:

1. An account on a photo hosting service, such as photobucket. The accounts are free. You must have this set up first.
2. The photo or image/graphic you want to use, that you have permission to use, downloaded on your pc.
3. A blog, etsy shop or website to link the button to. (or blogpost, if you are linking a giveaway)
4. follow these easy instructions (Yes, you can do this. Just take it one step at a time).

Here's the how to:

1. Sign in to photobucket
2. Upload your image from your computer. After you upload it, you may need to use their editing features to either CROP the image (if you are using your own photo) or resize the graphic you have chosen to be the desired 125 x 125 size.
3. Save a copy of this image to an album and name it.
4. Go to view album.

So far so good.

Now find your newly uploaded and edited image in your album. See it? OK.
5. When you roll your cursor over the image in the album a box menu comes up directly under it. The third line down is HTML click on and copy the full code in that box. It will look something like this:

<a href="http://s1176.photobucket.com/albums/x338/homeschoolfam/?action=view&amp;current=KatieGrabButton_New.png" target="_blank"><img src="http://i1176.photobucket.com/albums/x338/homeschoolfam/KatieGrabButton_New.png" border="0" alt="Photobucket"></a>

You need to change this code to direct the button to the URL (blog, blogpost or etsy shop address) you want it to go to. Currently, it is directing to Photobucket. Let's say you want to direct it to your blog. (We will use Brighton Park's URL for the example)...

Here is our code from before:
<a href="http://s1176.photobucket.com/albums/x338/homeschoolfam/?action=view&amp;current=KatieGrabButton_New.png" target="_blank"><img src="http://i1176.photobucket.com/albums/x338/homeschoolfam/KatieGrabButton_New.png" border="0" alt="Photobucket"></a>

I have highlighted all the code between the first set of "  " in yellow. We need to delete this code between the first set of quotations and replace it with where want to go by cutting and pasting what we want. So if I want the button to take people to my blog,
http://www.brightonparkblog.blogspot.com  I will put that URL address between those first quotations and it will now look like this: (you would use your own blog address). 

<a href="http://www.brightonparkblog.blogspot.com" target="_blank"><img src="http://i1176.photobucket.com/albums/x338/homeschoolfam/KatieGrabButton_New.png" border="0" alt="Photobucket"></a>

To make the little box that has the code show (so that readers can take the code and copy and paste it on to your blog, we need to do one more step.

We need to add one more thing to your code before adding it to your blog. Here is mine. To make it yours:

Replace the highlighted area in yellow with your blogs URL.
Replace the highlighted area in pink with the location of your photo on photobucket. To find this, go to your photo in photobucket and hover over. Instead of HTML, copy and cut the code beside  "DIRECT LINK" .

<form><textarea rows="5" cols="20" readonly="readonly"> <center><a href="http://brightonparkblog.blogspot.com" target="_blank"><img src="http://i1176.photobucket.com/albums/x338/homeschoolfam/KatieGrabButton_New.png" border="0" alt="Photobucket" /></a> </center></textarea></form></center>

When you put these together, it looks like this:

<center><a href="http://brightonparkblog.blogspot.com" target="_blank"><img src="http://i1176.photobucket.com/albums/x338/homeschoolfam/KatieGrabButton_New.png" border="0" alt="Photobucket" /></a>
<form><textarea rows="5" cols="20" readonly="readonly"> <center><a href="http://brightonparkblog.blogspot.com" target="_blank"><img src="http://i1176.photobucket.com/albums/x338/homeschoolfam/KatieGrabButton_New.png" border="0" alt="Photobucket" /></a> </center></textarea></form></center>

To center your button, add <center> to the front of the code (where I highlighted in green) . (The program will add it to the end).
Now... lets put this code on your blog...
6. In a new window, sign into your blog. Click on
~Design at the top upper right, then
~Layout (in the new menu that was brought up on the left hand side) then click
~Add a Gadget. This brings up the Gadget menu. scroll down until you see
~HTML/JavaScript

In the new box that comes up, paste in the code.

Click save.

Your new button is on your blog.

To make a button for a giveaway, the only difference is you are linking to a direct post URL, not your blog's main URL. To find a posts direct URL, go to that post and click on its TITLE. The specific blog post URL will now be in the URL window. Click and copy the whole thing. That whole thing is what you will paste in between those first quotation marks. Also, you will NOT do step two to make the code show up, as you only want the linked graphic on your sidebar, so making a button linked to a giveaway post only takes 1/2 the steps.

When you add both the button graphic and the code box  to your sidebar, it looks like this...a button at the top with a code box below, making it easy for people to take your blog button with them!

<center> <a href="http://brightonparkblog.blogspot.com" target="_blank"><img src="http://i1176.photobucket.com/albums/x338/homeschoolfam/KatieGrabButton_New.png" border="0" alt="Photobucket" /></a> </center>

**My current blog button was designed by Little Bitty Blog Designs. She designed my header and I wanted them to match. This helps with my blogs brand recognition and the code box belows allows readers to take my button with them.
Sometimes, we have the know how to do something, but not the time. If you would like me to make a button for you, I am offering the following services (beginning June 1st):

Giveaway Button (installed): $2.50
Put a giveaway button on the top of you blogs sidebar, linked to the specific giveaway post. You supply the graphic/photo (usually is a giveaway graphic or a picture of the prize.)

Blog Button or Etsy Store Button (installed): $10.00/$15.00
Make a blog button with code box if desired for your blog's sidebar, linked to your blog or etsy shops home page.  You supply photo/graphic ($10). I supply photo/graphic ($15).

Let me know if you have any questions or if you need a button!

This post is linked up to: Mad Skills Party, No Ordinary Bloghop.