Creating your own social media icons is actually a fairly simple process– it’s not much more complicated than creating an image you like and linking to the appropriate URL.
All you need is a good set of Social Icon Sillhouette images (which I will direct you to 🙂 and a little Picmonkey know-how.
Using Social Icon Silhouettes and a Custom Image
This method is my favorite for creating social icons and has been a popular how-to question among my readers, so I think you’ll like it too! But I’ll touch on another method in a later post for those of you who don’t want to create your own image from scratch.
1. Find free social icon silhouette vector images online. My favorite set is here: http://theblogdesignernetwork.com/2011/08/free-social-icon-silhouettes/ I like this one because you don’t have to do a download! They’re just click and save images.
2. Right click on the images you want to use, and save them to your desktop (or an easily accessible folder).
3. Go to picmonkey.com
and upload your white starter image
. Size it just a little smaller than the width of your sidebar (mine is 300px) by about 300px (just to give wiggle room, you can crop later). So I would size mine to about 280x300px.
4. Here’s where you use that creativity a little bit– create the image for your social icon to go over. I would suggest keeping it simple– circles, squares, etc. I’ll show you a few different things that you could do…
4. Go into overlays (if you’re using Picmonkey), select YOUR OWN, and add the appropriate social icon images, one at a time, that you’ve saved to your desktop.
5. Adjust the size and color, and drag the icons over your images. (most of the time, you’ll want the color to be white, but in image #3, I chose to have the social icons different colors. I sent the image to the back and faded them out so that the words are the main focus of the image)
6. Crop the image down and save it (as .png) to your desktop…
Now for something really fun… linking the URLs.
7. Go to http://www.image-maps.com (this site is AWESOME).
Time out. you will need an image URL to continue at this site (they can’t host images for you). So make sure to upload your image to a blog post, photo bucket, picasa, etc. so that you can have an “image location.”
8. Enter in your image location and click on “start mapping your image.”
9. Click on RECTANGLE
10. A.) Size the rectangle to fit over one social icon.
B.) Type in the corresponding URL (your FB page, your twitter profile, your RSS feed, etc), and click save.
C.) UN-CHECK THIS BOX.
11. Repeat for all social media icons (you only have to un-check the box once). Once complete, click on GET CODE.
12. Click on HTML Code
13. Copy the code and paste it into an HTML gadget box on your Page Elements (old blogger) or Layout (new blogger) page. I would recommend adding
at the start of the code and at the end of the code before saving. This will center it in your side bar. Drag the gadget box to wherever you want your social icons to appear!