I Made My Own Social Media Icons

This year one of my goals was to come up with a color scheme and use it pretty much everywhere.  After discovering the design seeds website I found exactly what I had been searching for. It's a lot like love at first sight. I just knew this was perfect for me. Aren't these great colors?

fallen hues from design seeds

As you can tell I have changed the look of my blog using these colors and I'm really please with it, so far. I'm still working on tweaking it to really make it all mine.

My latest venture took place last week when I decided it was time to tackle the hodgepodge collection of "follow me" icons. I know they are a necessity for anyone who is looking to build a social media following, but I wanted them to match my color scheme and take up less space in my sidebar. I've seen enough blogs to know it can be done; I just had to figure out how.

I watched several YouTube videos and started working on my buttons. This was my original plan. I had my matching background and all the icons. Since my sidebar is set at 310 pixels wide I made the "Follow Me" banner 10 pixels narrower. I used PicMonkey to create my icon graphic.

I used the rounded square geometric shapes, 55 pixels, evenly spaced, for the buttons. Then I did an overlay for each icon. For bloglovin, Etsy, facebook, google+, and twitter I just found a font that matched the originals. For instagram, networked blogs (which I later removed) and pinterest I found images online. I was quite pleased, but I couldn't figure out how to add this lovely image, with clickability, onto my sidebar.

Yup, once again I had jumped in too soon. It wasn't until I watched How to Install Social Media Icons on Blogger Sidebar - The EASY way! by Emily M I knew what I had to do. The video explained every step clearly enough for non-techies to understand.

The key is to NOT have a background (facepalm). So I went back to pickmonkey and cut out all the little icons and the follow me banner and came back to my blog. 

Here's the nitty gritty of how to set this up once you have your icons. (You can also find a plethora of downloadable icons to use if you don't want to make your own.)

• Create a new post, titled "Important Do Not Publish or Delete."
• Add your first icon image.
• Click on the image to add a link. You will need to do this twice ( I don't know why, but you do.) 
• Enter the website info.
• Repeat until you have all your icons added and linked to a site.
• In "HTML" mode copy the whole code.
• Go to "layout" and click on "Add A Gadget," then click on "HTML/Javascript"
• Paste the code you just copied into the content box. Leave the title blank.
• Place it in your sidebar.

I had to tweak mine just a bit by adding a space between the images and I originally did not have the "Follow Me" banner, but then I added it before the first icon image. (I also had to resize it because it was just a touch too wide.) Remember, every time you make changes to the code you will need to copy and past the new code into the content box for it to be recognized.

And here's the finished, and clickable, social media icons now...

So, I had to forgo the background, and it pretty much took a whole day, but I didn't have to pay anyone and I like how it turned out. The hint of color on the edges of the buttons reminds me of tea-stained tags. Neat.