how to | blog button

Hi Girlies!
A while ago, I was searching Google on how to make a blog button. I could NEVR find a easy enough tutorial, until I came across Sew. Craft. Create. It was so simple! Now, using her code, I will tell you how to make one!. A blog button is a picture in which you can "grab" using a code, then you can add it to your side bar. Here is one I made for Pryia








<center><a href="http://agplayground.weebly.com/ <br /> "><img border="0" src="http://i1228.photobucket.com/albums/ee449/ChunkeyMonkey00/pryiA.jpg" width="125"/></a></ center>
{Please Grab it for your blog by copy and pasting it into a HTML/Java Script accepting place.}

{Credit to Sew. Craft. Create. and Adorkable. Follow their blogs, THEY ARE AWESOME!}

First, you are going to have to make the actual picture. I love to use Picnik to make mine.

Second, size it to about 200x200, or until it is big/small enough to fit on your side bar {or where ever you would like it}.

Then, upload it to Photobucket, or another file sharing website.

After you do that, you will need to open Word or another document program. Copy and paste this code on to the page: 

<center><a href="Blog Address" target="_blank" title="Blog Title"><img alt="Blog Title" width= "150" src="Code from photo" /></a></center>

<center><textarea id="code-source" name="code-source" rows="3"><center><a href="Blog Address"><img border="0" src=" Code from photo" width="125"/></a></ center></textarea></center>

You will need to fill in the blue text to what it says. On Photobucket, you will take the HTML code from underneath the photo. I highly recommend using Photobucket for 100% results.

 Be very, very, careful when you replace the blue text. If you delete just one thing, your whole entire button will not work. 

When I was just searching Google for cool things for my blog, I came across Adorkable and her AWESOME tutorial on how to make a hover over image. Thanks, Adorkable! {I love your blog!}

If you want to make a switching button with TWO photos when you hover over it, use this code instead when placing the code for the button: 

<a href="Blog Address">
<img src="First Image you want to show up BEFORE you hover over"
onmouseover="this.src='Second Image you want to show up AFTER you hover over.'"
onmouseout="this.src='First Image Again'"
alt="Optional Text " /></a>

Use that code instead of the HTML codes from Photobucket on your blog button!