Get Creative - Personalize Your Blog's Social Media Icons

You may have noticed a few changes around my blog of late.  The truth is, I have gotten a little obsessed with stylizing - blog stylizing, that is.  After I started this blog, one of the first things I did was buy a pre-made Blogger template from Etsy.  I thought it made my blog look more professional, and let's face it, I did not have the skills to build something like that on my own.  However, I quickly learned that buying a blog template is a slippery slope… before you know it, you are being nickel and dimed for things like adding a social media icon, or almost any other change you'd like to make.

Still, I couldn't get enough of how cute some people make their blogs!  The matching icons, the creative fonts…oh my goodness!  I knew I had some learning to do, and the first thing I figured out was how to create your own social media icons.  (You can see my handiwork on the far right).  ;)  This way, you have complete control over your blog's appearance, and you can make your own social media icons to match whatever else you have going on!

INSTRUCTIONS FOR CREATING YOUR OWN SOCIAL MEDIA ICONS:

1.  Download vector images of the social media icons you want.  There are plenty of sites that have these for free, but I used Icons DB, and it worked like a charm!  Not only are there multiple icons to choose from for each social media platform, but you can choose what size you need, and even the color down to the HEX code.  You can also get some more stylized icons if you prefer.

Icons DB lets you choose from multiple icons for the same social media platform, such as Pinterest.  I will be using purple icons for this tutorial.

2.  Use Pic Monkey to turn your newly downloaded icons into something customized for your blog.  You can use pretty much any picture editing program for this, but Pic Monkey makes things easy, especially for beginners.  Select the "Design" option from Pic Monkey's website.  On the left hand menu, click on the butterfly icon to search through the available overlays.

I am going to choose a star overlay for this tutorial, so I went to the "Stars" overlay menu.  Choose your preferred shape, and then you can play with the size and the color until you get something you like.  I chose a star shape.

3.  Now, go back to the left-hand menu, and choose "your own" at the top of the Overlays menu.  We are now going to load the fun social media vectors you downloaded a moment ago!  Play with the size of your social media icon so it will fit over the star (or whatever shape you chose) overlay you just created.

Doesn't that look cute?  :)  Now, assuming you have more than one social media icon you'd like to make, select the original overlay you first created, right click (or on a mac control+click) and select "duplicate overlay."  A second overlay of your chosen shape will appear - move this so it is next to your first one, or the desired distance away.

4.  Now, go back to the "choose your own" overlay option to pick the next social media vector you had downloaded.  Follow the previous steps to make sure the size and placement matches your first icon.

5.  Once you have all of the icons you'd like in a row (or however you would like them arranged), it's time to make sure the image is sized properly for your blog.  First, crop the image as tightly as you can using Pic Monkey's "crop" tool.  Next, resize the image using Pic Monkeys "resize" tool.  For the purposes of this tutorial, I resized my image to be 150 pixels x 75 pixels for 2 icons, but you should resize according to your blog needs.  Now save your image!

6.  Now we need to make the images clickable, so your followers can click on the Pinterest icon and be taken to your Pinterest page!  To do this, there is an awesome (and free!) image mapping service via Image-Maps.com.  Go to their website, load up your image and click "start mapping".

7.  Right click on your first icon and click "Create rect" - size the rectangle so it is over your entire first icon.  Next, fill in the social media URL that this icon should link to along with a Title and ID (the title is what will show up when the mouse hovers over this image.)  Click Save, and repeat for your remaining images.

8.  Your image should now be mapped and clickable!  Right click on your image again, and this time choose "get code".  Click on the "HTML" tab to get your HTML code for this new, clickable image!  The code will be at the very bottom of the screen - copy this code.

9.  The following is what you would do in Blogger, but you can now use your code with whatever blog hosting service you use.  In blogger, and open up your layout settings to add a new gadget to your homepage.  You should choose the HTML/Javascript widget.  Paste your code into the widget, and make sure you've placed the widget wherever you want your icons to appear.  And…DONE!

These are finished and clickable - try them out!  (And please follow me on Pinterest and Google+!  :)

NOTE - UPDATE as of November 2014:  Unfortunately, Image-Maps is no longer a free service, and my logo's will no longer show up here…!  However, never fear.  This video will show you how to load your own images onto your Blogger blog, without using a 3rd party hosting service:  https://www.youtube.com/watch?v=H4hI5WmqpBw.  This is also possible via a Wordpress widget!  

There you have it!  Hopefully this inspires you to get creative with your blog template.  I am starting to take steps toward personalizing my blog template (although I am still using my purchased Etsy Theme as the main backbone), and will try and share ideas as I go along, if there are any other beginners out there like myself.  :)