How to Add Social Media Icons to Your Blog

I'm working on redesigning my blog, and one of the things I wanted to add was social media icons.  It's pretty easy; want to learn how to do it?

First, of course, you need to get/make your icons.  You can get free icons in various styles, in several file types, for more social media sites than I've ever heard of here.  That's where I got mine.

This is the Facebook icon I chose.  But I didn't want it to be black, so I pulled the png file into Photoshop.  

 I just locked the transparent pixels, pick my color, and (on a Mac) hit SHIFT+F5 to fill the unlocked pixels with the new color.

And now I have my own customized Facebook icon.

Then you just follow the same steps as in this tutorial for adding customized navigation tabs.

If you want to have an e-mail icon, the code goes like this:  

<a href="mailto:your-e-mail@whatever.com" mce_href="mailto:your-e-mail@whatever.com/"><img src="the url where the image is hosted aka Direct Link on photobucket" mce_src="the url where the image is hosted aka Direct Link on photobucket" border="0" /></a>

Just change the red text to your information.

If you are adding multiple icons, you can put a couple spaces (not line breaks, just spaces) between the code blocks to make them not butt up against each other.

Social media icons:  check!

Now on to the next blog-improvement project...

(This post just needed a Pin-able image, so now it has one.)