Creating an E-mail me button for your blog

You don't have to be a graphic artist, or web designer, to have a good looking blog.  If you can follow directions, you can make an email me button.  I used some awesome images I got at MagpieMine on etsy.  She has a lot of different styles so you can find something that suits your style.

All you will need is an image and a photo editing program.  I use Photoshop Elements, but there are lots of great free programs out there.  Usually your computer comes with something, even if it's basic.

1. Open the file containing the image you want to use

I wanted to use the crown from the top left, so if your image has more than you need crop it down.

Step 2- Go to File and New.  For a blog button I recommend a size of 150 pixels by 150 pixels.  Fell free to make it as tall as you like, it doesn't have to be square, but I wouldn't go any wider than that for a standard blog layout.

If your using a high resolution (high quality) image like mine from MagpieMine, set your resolution at 300 pixels/inch.

Step 3- Cut and paste or drag and drop your crown image onto your new blank workspace.  Resize the crown image until it fits onto your square making sure the image you use isn't distorted.  Photoshop has a lock button you can use to keep your proportions, it looks like a figure 8.

Step 4- Add text

What ever you want it to say.

Now save your image as a jpeg.

Your half way there!  The rest is easy peasy.

Step 5- Open the internet and go to photobucket.com if you don't have an account, make one, it only takes a minute and it's free.  Once your ready hit the Upload image button.

Find the image you just created and upload it.  Once it's done you save and get links.

Step 6- Look for the "direct link" and copy it.  Put it in a safe place and go to your blog.

Step 7- Go to layout, add widget (I'm using blogger, so if your not you will have to adjust, sorry!) Click the add HTML widget.

Now you need to copy this from here:

[a href="mailto:maryjanesandgaloshes@hotmail.com">]
[img src="http://i836.photobucket.com/albums/zz290/tballweg/test-1.jpg"/][/a]

IMPORTANT- anywhere you see [ or ] you need to replace it with < or > I couldn't post it with the correct brackets, blogger wanted to convert it to an image and you wouldn't have been able to copy it.

Replace the red text with your email address and the direct link address from your image.

Step 8- Your done!  Save and check your blog to make sure it looks right, then click on it to make sure it works and you changed the code correctly.  As much as I love email, you don't want your emails coming to me!

If you would like to use this button as it has been shown here, just change the email address portion and leave the image link alone.