1.27.2010

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. 






22 comments:

  1. I am soooo glad I came across this. Thank you so much for the tutorial...I'll be trying it later today!

    ReplyDelete
  2. Great! Let me know how it turns out!

    ReplyDelete
  3. Great tutorial! I'll have to see if I can figure out how to do it without Photoshop...

    ReplyDelete
  4. What a great tutorial! Thank you - I added one to my blog... Check it out!
    http://puppydogtails-marybeth.blogspot.com/

    ReplyDelete
  5. hi taylor :)
    i came here via maggie's blog. what a fantastic tutorial of making an email button :)) and thank you for sharing the HTML with us :)) i shall definitely try it out:)
    HUGS!
    luthien :)

    ReplyDelete
  6. Big thanks. Do you have a tutorial on how to make and etsy button?

    ReplyDelete
  7. What kind of etsy button are you looking for? Are you using Blogger?

    ReplyDelete
  8. I just made an awesome button for my blog! Thank you so much!

    ReplyDelete
  9. Thanks for a wonderful tutorial, it worked a treat!

    ReplyDelete
  10. This is great! Thanks.
    http://baileydoehler.blogspot.com/

    ReplyDelete
  11. I noticed on the left side of your blog you also have a button that links to your facebook fan page. Do you know the code to link to there, also maybe for etsy? Thanks for your help.

    ReplyDelete
  12. I emailed you the code as blogger blocks it from comments.
    For etsy just use a photo of your choice and your widget to add a link to your shop, or create a mini like mine from etsy (they give you the code).

    ReplyDelete
  13. Thank-you! I'm new to blogging and this is really helpful. Adding it now!

    ReplyDelete
  14. thanks so much for your help with this email button. I am new to html stuff and need help bad.

    check out my blogs for free tutorials on crafty projects and clothing.

    http://personalized4you.blogspot.com/
    http://callmecraftymomma.blogspot.com/

    ReplyDelete
  15. Thank you so much for this great tutorial I just used it to add the button to my blog!!! I will be following you from now on and adding you to my blogroll!!

    ReplyDelete
  16. This is EXACTLY what I was looking for!

    ReplyDelete
  17. This was SO helpful!
    I tried it on my blog and it worked perffectly! The instructions were very clear which was great.
    Thanks so much

    Alyce

    ReplyDelete
  18. just did it, thanks a lot for sharing this!

    ReplyDelete
  19. a quick thank you for taking the time to teach - much appreciated:)

    ReplyDelete
  20. It worked perfectly.. thanks so much!

    ReplyDelete
  21. I love this tutorial! My husband recently gifted me with Photoshop Elements, and I'm navigating my way through it and the blogosphere. This is a great first project, as I recently purchased some great digital papers on Etsy. Would you mind if I mention your post in my blog once I get my button up and running?

    Thanks for the great how-to!

    Sarah

    ReplyDelete
  22. Thank you so much for this helpful tutorial! Used it on my blog :-)

    ReplyDelete