How to Make a Blog Button

I finally added a blog button to this blog and I want to teach you how add one to your blog, too!

Here is my blog button! Feel free to put it on your blog and share the LOVE!! :)

<a href="http://teacherbloggingbasics.blogspot.com/" target="_blank"><img alt="The Teacher Wife" src="http://i281.photobucket.com/albums/kk236/neumey/TBB-BUTTON.gif" /></a>

In this tutorial, you will learn how to make a blog button in Power Point {although you can make a button in any design program - I personally use Adobe Illustrator} and how to add it to your blog in three easy steps.

STEP 1:

To make your own button, open Power Point, click on Design, and then Page Setup.

I would suggest making a button that is 160px X 160px 

which is 2.22in X 2.22in or 5.64cm X 5.64cm

On the Page Setup screen, change the slide to the following dimensions.

Then make a blog button using different shapes, colors, patterns and clipart to match your blog.  Click {here} to check out some great clipart and font resources. Make your button original and unique to your blog... don't be tempted to copy someone else's design or style.

After you have made you blog button, select all the different shapes and text boxes. To do this, hold down SHIFT and click on each shape. When everything is selected, continue to hold down SHIFT and right click on your button. Select "Save as Picture..."

Be sure to save it as a PNG: Portable Network Graphics Format.

{BTW: This step makes it so you don't have an unwanted, white box surrounding your image.}

-------------------------------------------------------------

STEP 2:

Next, you need to sign up for Photobucket, and don't worry, it's free. Click {here} to sign up.

After you sign up and you are signed into your account, click on the green Upload button.

Then, click on the green button that says Select Photos and Videos and find your blog button.

When the upload is complete click on View Album.

Next, click directly on your blog button.

On the next page, you will see this box on the right side. 

Remember this, because you will need the Direct Link in Step 3.

-------------------------------------------------------------

STEP 3:

Open up a new window and go to your blog address. Make sure you are logged into your blogger account and click on design {it is in the upper right-hand corner}.

Then, click on Layout.

Next, click on Add a Gadget.

Add the HTML/JavaScript gadget.

Copy and past the following code into the Content part of the HTML/JavaScript gadget. Make sure to put your own blog address where it says, "PUT YOUR OWN BLOG ADDRESS HERE," and the direct link where it says "PUT THE DIRECT LINK TO YOUR BUTTON HERE." {BTW: The direct link can be found in step 2.} When you have added the correct code, click on Save.

This is the HTML code you need:

<div align="center"> <a href="PUT YOUR BLOG ADDRESS HERE" target="_blank"><img alt="Photobucket" border="0" src="PUT THE DIRECT LINK TO YOUR BLOG BUTTON HERE" /></a> <div align="center"> <form> <textarea rows="6"><a href="PUT YOUR BLOG ADDRESS HERE" target="_blank"><img alt="The Teacher Wife" src="PUT THE DIRECT LINK TO YOUR BLOG BUTTON HERE" /></a>

Now your faithful readers can put your button on their blog!!