July 31, 2011

Tutorial: Create Email Social Media Icon

As my blog has been growing, I've began the process of figuring out the technical side of blogging, 
I've posted on how you can make your own blog button and how you can create copyable button code so others can grab it.

You've probably noticed how bigger blogs have social media icons allowing you to easily link up with them using various sources like Facebook, Pinterest, and email. Most buttons follow the same process [tutorial here]- but the email button needs an extra link. You can make one, download one from online or grab one below--then follow this tutorial to add it to your blog

 Well, let's make ourselves an email link, OK?
[1] Decide on an image what you want to use to represent the link on your blog. This often looks like and {e} or an image of a letter. There are sites like Design Matterz that allow you to use images for free, and this one has a great selection of colors. You can also use any of these icons from that were free downloads by dragging them onto your desktop.

[2] Once you've decided on the image, upload it to a photo hosting site, like PhotoBucket. This is important because we need an image code that we will insert into our html code.
[3] Now you want to copy the grey code and insert your email address and your direct image code in place of the red portions.

[4] You are now ready to insert the code into the Html portion of your blog or (more likely) into your blog background. To do this you should go to the "design" page, then click on "add a gadget." Next click on the gadget "HTML/Javascript." Here you can insert your entire code.

That's all there is to it. I guess I'll be working on the other buttons next.
Good luck making your own!


  1. I am marking this one for later! Visiting from CRAFT. I am a new follower, too. This is very helpful for me since I am still new to blogging and trying to figure it all out. I am so glad I finally have a place to log my crafts but it would be great to gain a following, too since so much work does go into the blog. Thanks for educating me!

  2. Becca! YOU. ARE. AMAZING. Thanks for the tips, they have been SO helpful to a newbie like me!

    I am hosting my *first ever* link party tomorrow - it opens tonight at 5 EDT. And thanks to your button tutorial, I even have a button for it, LOL!

    I hope you'll stop by and link this up!

    Adrianne ~ happyhourprojects.blogspot.com

  3. Thanks for this tip! I've been wanting to improve some things on my blog, but have a hard time finding the time to sit down and figure it out for myself, so it's easier if someone just tells me! :P

  4. Thanks for this tutorial! Social media buttons are next on my to do list!

  5. thanks so much for posting this! I think it is important for a lot of people to figure out! Thanks so much for linking up to handmade tuesdays @ ladybug blessings! www.ladybug-blessings.com

  6. What a great tip, I have been wanting to do something like that!


  7. That's a great tip...I have been trying to figure out how to do that. Thanks.

  8. A great tip.. just in time too! I have this on my do not delay, act today list!

  9. I found you via Flamingo Toes Think Pink Sundays.
    THANK YOU for sharing this!

  10. Thanks! Bookmarking for later as I am trying to navigate my way through blogging and all that goes on behind the scenes. Saw you at FToes Think Pink.

  11. Great tutorial..Awesome idea.. I found ya via Made By You Monday hop and I'm officially following your blog with smiles..Can't wait to read more..Hope you can stop in and say hello sometime :)) Ty..

  12. Thank you so much for this info! I really need to step it up on my blog so I am bookmarking this. Great inspiration :)

  13. Another useful tutorial! Thanks so much for sharing!

    Thanks for linking to a Round Tuit! Remember the voting is now open – if you want to head over and vote for your project! The most voted link will get a full post feature/promotion next week!
    Hope you have a great week!
    Jill @ Creating my way to Success
    Round Tuit 67 voting

  14. I've been trying to figure this stuff out! THX!

  15. I am *finally* getting around to doing this and I wanted to let you know that there is a one of these things < missing in your code. This bracket thing < goes right before the word image and then it works! Perfectly, too! Thanks (again) for putting this info out there for us to find!

  16. Thank you!!! This is so helpful :) I had everything working but the email icon. I can't believe other "how to" posts leave out the "mailto" portion of the code. Dumb.

    I really appreciate your easy to understand post, especially for the HTML illiterate like me! lol

    I'd be tickled if you came over and said hey in my neck of the woods, www.myclevernest.com!



Thoughts? Questions? Opinions? Let's talk about it!