While He Was Napping

momma gets stuff done

  • Home
  • About
  • Archive
  • Do It Yourself
    • Crafts
      • No Sew
      • Painting
      • Paper Crafts
      • Repurpose Projects
      • Vinyl
      • Washi Tape
      • Kid’s Crafts
      • Fonts
    • Sewing
    • Decorate
      • Home Decor
      • Holiday Decor
    • Celebrate
      • DIY Gifts
      • DIY Your Party
  • Recipes
    • Beverages
    • Appetizer
      • Bread
      • Other Appetizers
    • Snacks
    • Main Dish
      • Meat
        • Chicken
        • Beef
        • Pork
        • Seafood
      • Vegetarian
      • Slow Cooker
      • 30 Minute Meals
    • Dips & Sauces
    • Salads
    • Pasta
    • Soup
    • Dessert
      • Cookies
      • Brownies
      • Cupcakes and Cake
      • Box Mix Recipes
      • Other Sweet Treats
    • Breakfast Food
      • Pancakes
      • Waffles
      • Muffins
      • Other Breakfast Food
  • Family
    • Babies
      • Pregnancy
      • Newborns
      • The 1st Year
    • Toddlers
    • Preschoolers
    • Kindergartners
    • 6-8 Year Olds
    • The Grown Ups
      • Date Night
      • Romantic Gifts
    • Self Care
  • For the Home
    • Cleaning
    • Organizing
    • Emergency Preparedness
  • Travel
    • Travel Tricks & Tips
    • Traveling with Kids
  • Tech & Gadgets
    • Must-Have Apps
    • Techy Home Appliances
    • Gadgets & Electronics
    • Blogging Tips
  • Printables
    • Posters
      • Quote Printables
      • Subway Art Printables
    • Printable Organizers
    • Printable Journals
    • Learning Printables & Worksheets
    • LDS Printables
  • Holidays
    • New Year’s
    • Valentine’s Day
    • St. Patrick’s Day
    • Easter
    • Cinco de Mayo
    • Mother’s Day
    • Father’s Day
    • 4th of July
    • Back to School
    • Halloween
    • Thanksgiving
    • Christmas
    • Holiday & Seasonal Printables
You are here: Home / Guest Post: Creating an Email Contact Button by First Floor Flat

July 11, 2011 by Krista

Guest Post: Creating an Email Contact Button by First Floor Flat

Today, Susie from First Floor Flat: The Computery is here with a great blog tutorial for you guys!  I was so thrilled when Susie offered to do a guest post.  I’ve stumbled across Susie’s site a few times and her tutorials are fantastic.  Definitely a blog worth checking out (and following!).  Here’s Susie!

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 program. 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 programs 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!

________________________________________________________

Thank you so much Susie!  This is something I need to do here on While He Was Napping.  One more thing on my to-do list.   It’s never ending, right?!  Make sure you go check out Susie’s other awesome tutorials.  They are really great!  Thanks again, Susie!

I'm Krista. Ringleader here on While He Was Napping, wife to my handsome Mr. Right & momma to my THREE energetic boys, Big J (9), Little J (6) & Little N (4). We FINALLY added a beautiful little girl to our family last December.

I’m knee-deep in Tonka trucks & Thomas trains. I survive our crazy days with Vanilla Coke, Sonic slushies, sweet snuggles and little giggles. When I tuck them in tight & kiss them good night, I get a little time to create & just be me.


It all happened
while (s)he was napping
Want More of My Story?

Privacy Policy

While He Was Napping respects your privacy and is committed to keeping any personal information collected on this website confidential. To find out what information we collect and how it is used or what options you have regarding your information, see our full privacy policy here. Creative Commons License The website found at whilehewasnapping.com and all subdomainsauthored and published by Krista is licensed under a Creative Commons Attribution-NonCommercial-NoDerivs 3.0 Unported License.

Pretty Chic Theme By: Pretty Darn Cute Design