Wednesday, 22 June 2011

UPDATE ON MAKING YOUR OWN EMAIL BUTTON


In an earlier post, I showed you how to add your code to one of my email buttons. In this tutorial, I'll show you how to make your own!

FIRST STEP: YOU NEED AN IMAGE


Choose an image to use for your email button - maybe one of your own, or a copyright-free image (from my Freebies page or similar site).

You need an image which will fit in your sidebar - so ideally it needs to be anywhere between 180pixels - 220pixels wide (height isn't so important) and 96dpi.

You can create this on your computer using your favourite graphics programme. Add text if you want. You then need to upload this image to an external site, eg: Flickr, Picasa, photobucket.com (free). Here I'm showing you examples on Photobucket (all other programmes will be very similar).

First, sort out the upload settings then click UPLOAD to browse your My Pictures folder for an image to use. You need to set a smaller size for two reasons: the image may look too large on your blog, and also you don't want to use up unnecessary bandwith on your account..


When the image is uploaded, you need to insert the url of the image into the coding for the email. This is where you'll find it.



Follow the directions below to create your email button and insert the code into an html box on your blog, per the instructions. Go and take a look - if you aren't happy with the image, you may want to edit the size, the appearance, add some special effects... Pass your cursor over the image to bring up the Share/Edit/Delete/Move bar (in blue, below) and click on Edit.




Once you are happy, either replace the original image, or save a copy (to be on the safe side). If you replace the image, you should see the change immediately on your blog (although if you've edited the size, it doesn't always show up straight away for some reason). If you have saved a copy, you'll need to use that code to replace the image coding in your email button code.

SECOND STEP: WRITE YOUR EMAIL BUTTON CODE
  1. Go to Layout > Page Elements >Add A Gadget and click on the HTML/JavaScript box.
  2. Copy & paste the code exactly as shown, and substitute your own email address where I've typed YOUR EMAIL ADDRESS, in between the " " marks.
  3. DO NOT DELETE the mailto: code, or it won't work.
  4. Don't leave any spaces between the mailto: and your email address, or the end of your email address and the " symbol, or it won't work either.
  5. Don't leave any spaces between the " symbols and the url of your image code - or, again, it won't work.
  6. Click Save and then go and test it!

<a href="mailto:YOUR EMAIL ADDRESS"><img border="0" src="YOUR IMAGE CODE"/></a>


Your email coding should look something like this:

<a href="mailto:susie@anemailaddress.com"><img border="0" src="http://myimagealbum@somesite.com"/></a>

Now all you need to do is copy and paste this into an HTML widget box, right into your sidebar!

post signature
your photo name

6 comments:

  1. I'm definitely going to give this a try - thank you!

    ReplyDelete
  2. I managed to do it - thank you for the tutorial!

    ReplyDelete
  3. You are an angel! Thank you blog tuts, I need much help with some of the how tos. Sooo grateful. I m your newest follower! (from Midwest, US) have a terrific week!

    ReplyDelete
  4. Hi! I was just wondering if you minded if I shared this tutorial with my readers, I will of course give you all the credit! Thanks!

    ReplyDelete
  5. So glad it's worked for you, and you've found the tutorial useful. Thank you for leaving a comment!

    Ashley - Thanks so much for asking.

    No, I don't mind at all as long as you give me the credit. Glad you've found it useful!

    ReplyDelete

I absolutely love to receive comments!

But please note - I DO check for spam, and I moderate all comments - any spam is deleted at source.