A professional and briefly informative email signature is very important for anyone who sends a lot of business emails. Including bloggers. You want your recipients to know who you are (name, position, and company), as well as all the methods they can use to reach you. Secondary email, social media, or phone number if you’re OK with giving it out.
A simple text email is all you need, but I like to take mine a few steps farther. Really, which would you prefer? This:
There is nothing wrong with the first one. It definitely gets the job done. But I feel like the second one makes a much better impression, plus it draws attention to everything at the bottom of the email. I don’t know about everyone else, but once I finish the email, I don’t look at anything beyond the salutation unless it’s necessary. Half the time, I skim the emails, anyway. So anything to draw more attention to it, right!? Right!
You might think I needed someone to design that signature for me, but I did it myself! It’s much easier than it looks, and I intend to show you exactly how I did it.
First, create your images. You can either download Gimp (which is free and acts like Photoshop) or use PicMonkey. The social media icons were downloaded from a site that doesn’t exist anymore…but they’re fairly common. You can find a set just like it here or use your own.
In my own signature, there are 8 images–my signature, my social media icons, and my photo. You can exclude any of these things, but I’ll show you how I did it as is and then how to remove what you don’t want.
(FYI, I created the rounded photo by putting it into PicMonkey. Go to Frames –> Rounded Corners –> set corner radius all the way to the right, check the box next to “Transparent corners,” and click “Apply.”)
If you’re familiar at all with HTML, you’ll have no issues with this. If you’re not, I’ll try to walk you through it. (If you feel I’m not being clear about something, feel free to leave you questions in the comment section!)
Log in to your email account and find the area where you can create a signature (it’ll be in Settings or Options). Copy and paste this code:
<td><img src=”http://YOUR SIGNATURE IMAGE” width=”118″ height=”35″> <br>
<a href=”http://YOUR WEBSITE URL“>YOUR WEBSITE</a><br>
A description of you or your blog. You can also leave this blank.
<td><a href=”http://facebook.com/YOUR FACEBOOK SN” target=”_blank”><img src=”http://YOUR FACEBOOK IMAGE” width=”25″ height=”25″ alt=”Follow on Facebook“></a><br>
<a href=”http://twitter.com/YOUR TWITTER SN” target=”_blank”><img src=”http://YOUR TWITTER IMAGE HERE” width=”25″ height=”25″ alt=”Like on Twitter“></a><br>
<a href=”https://pinterest.com/YOUR PINTEREST SN” target=”_blank”><img src=”http://YOUR PINTEREST IMAGE HERE” width=”25″ height=”25″ alt=”Follow on Pinterest“></a><br></td>
<td><img src=”http://YOUR IMAGE URL” width=”75″ height=”75″> </td>
Replace everything within that code with your own information. (The blue parts are things that don’t need changed.) If you want to change the size of something, go for it.
To add another column of social media icons, add another line under Pinterest by going to </td>, hitting enter, and typing <td>. Add the social media icons you want to add and then end it with </td>. Those “td” codes create new columns (<tr> is for the row).
To reverse this (if you want your image on the left side, for instance), just copy & paste the column (everything from <td> to </td>) wherever you want it to be. It’s pretty simple!
If you want your social media icons to go underneath everything, like this:
then you should use this code:
<td><img src=”http://YOUR SIGNATURE IMAGE” width=”118″ height=”35″> <br>
Your description here. Or leave this blank.
<td><img src=”http://YOUR IMAGE HERE” width=”75″ height=”75″> </td>
<tr><td colspan=”2″><center><a href=”http://www.bloglovin.com/YOUR BLOGLOVIN SN” target=”_blank”><img src=”http://BLOGLOVING IMAGE HERE” width=”25″ height=”25″ alt=”Follow on Bloglovin“></a>
<a href=”http://facebook.com/YOUR FACEBOOK SN” target=”_blank”><img src=”http://FACEBOOK IMAGE HERE” width=”25″ height=”25″ alt=”Like on Facebook“></a>
<a href=”http://plus.google.com/YOUR GOOGLE+ SN” target=”_blank”><img src=”http://GOOGLE+ IMAGE HERE” width=”25″ height=”25″ alt=”Follow on Google+“></a>
<a href=”http://pinterest.com/YOUR PINTEREST SN” target=”_blank”><img src=”http://PINTEREST IMAGE HERE” width=”25″ height=”25″ alt=”Follow on Pinterest“></a>
<a href=”http://YOUR TUMBLR SN.tumblr.com” target=”_blank”><img src=”http://TUMBLR IMAGE HERE” width=”25″ height=”25″ alt=”Follow on Tumblr“></a>
<a href=”http://twitter.com/YOUR TWITTER SN” target=”_blank”><img src=”http://TWITTER IMAGE HERE” width=”25″ height=”25″ alt=”Follow on Twitter“></a></td></tr>
That one is great if you want to have lots of social media icons, but you don’t want to take up more horizontal space than necessary.
To move rows, copy and paste everything from with the <tr> (row) field.
There are many different ways you can use this code, so play around with it and see what you come up with!
[ETA: Many of you are having issues with this tutorial because Gmail doesn’t allow HTML (which I totally forgot about when I wrote this). So Ellie from Creative Geekery sent me a tutorial she found on how to load signatures like this into Gmail. You can view the tutorial here.]
Do you use a signature? Is there a special way you like to do it? Leave it in the comments!
Okay, my question is….where do you get the URL for the images? I used PicMonkey to edit but don’t see an option to copy/paste a URL. Am I missing something?
(By the way, thanks for the tutorial/HTML code!)
Love it. I have saved this for when I have a spare moment. The signature looks great. thanks for sharing this
this is very helpful. However, my e-mail provider, mail.com does not allow, but I use picmonkey, so I may try this. Saw this on #AnythingGoes
What a great post! I had no idea how to do this and just kind of avoided it… ahem..but now–awesome! I love how you made it so easy for others to make one!
I have a link up on my blog if you’d like to share a post!
Thank you for sharing the code a great signature. I do like your second one best. Thanks for sharing at #Anythinggoes and see you next week.
SUCH a helpful resource! Thank you for making this so honest and easy to use. Im in the very beginning stages of beginning my blog (appropriate since I’m in the beginning stages of starting a new life as well) but so grateful for people and posts like this that make this goal seem possible.
Thanks for caring and sharing with us!
So glad you found it helpful, Brooke! 🙂
I love so many things about this post! I do use Gmail, so I’ll check out Ellie’s post too. It’s so nice to meet you on 2 Uses Tuesday, and I’m heading over to follow you on IG…
Thanks, Meredith! I’m so glad you found this helpful! 🙂
This is so awesome!! I am pinning this, I am sure that I’m not the only one who wants to do this but doesn’t know how! Thanks again!
Your amazing! Thanks for creating this and sharing it with us!!
I am including you in the features this week at TTT 🙂
Have a wonderful weekend!!
Thanks, Jess! 🙂
Great post! Pinned and tweeted. Thank you so much for bringing such a masterpiece to our party. I hope to see you tonight at 7 pm. We can’t wait to party with you! Lou Lou Girls
How can I add an image into the code if it’s not from a webpage(https:/) and just an image on my computer? The whole code shows in my email when I’m finished. Thanks so much!
Unfortunately, if there isn’t an option to upload an image (which would put the image on the web), it can’t be done. Code relies on the image being on the Internet already. Fortunately, there are plenty of image storage websites, like Photobucket.
If you’re having trouble with the code showing up as code, then it may be an issue with where you’re putting it. Some clients (like gmail) require other steps to be taken before they’ll work. For something like Thunderbird or Outlook, there is a section in the Settings where you can paste the code. This will not work if you’re simply copying and pasting the code into an email message.
Hope that helps!
Thank you so much for the info and the fast response! I appreciate it and it definitely did. Do you know which section under settings it would be for Outlook? That’s the email service I’m currently using. I tried googling it and haven’t found anything.
Those signatures are great! Thank you for sharing.
I am new to the blogging venture; could I ask you a question?
When someone subscribes to your site, do you send them a ‘welcome’ email? If so, what do you put in it?