Blogger Tutorial : Social Media Icons

After redesigning my blog recently I was inspired to share a few easy to follow tutorials to hopefully save at least one person from all the grief I went through! If your like me and haven't meddled with the look of your blog for awhile you'll have the same "deer in headlights" feelings when you realize the Blogger interface has completely changed, good grief... just when I thought I understood the old one!

In a couple easy steps I'll teach you how to add your own personal social media icons to your blog. 

Why add social media icons? Well for one it's an easy way for your readers to get regular updates on your latest posts. And two, it helps increase your number of followers! What serious blogger doesn't want more readers, hmm? 

There are lots of great freebies out there that will suit your personal blog style, if your a keener you can design your own, or you can purchase pre-made/custom ones by great designers like Pearl & Anchor, via Etsy. 

For this tutorial I am using a set of pastel color themed icons I found here. You can find other great lists of freebies via Google or Pinterest.

After you've got your icons, open them up into photoshop and set them up the way you want them to appear on your blog. Save as Web & Devices, choose PNG or JPEG (I personally prefer PNG for things like this). 

Now head to this site called "Image Maps" and upload your image and click "start mapping your image."

When your image loads successfully you can click to continue to the next step.

Now to add what you've been waiting for, your links! Choose Rectangle located on the right sidebar. 

Resize and position your rectangle. Add your link. Save. And repeat for the remainder of your icons.

Almost done, uncheck these two options (Base URL and Show Text Links), and then click "Get Your Code."

On the next page Image Maps brings you to you want to select "HTML Code" located on the top nav bar. Highlight and copy the code. 

Open up your Blogger layout and add a new HTML widget to the area you want your icons to live, in my case, the sidebar. Paste your HTML code into the widget and save. And... Taaaa daaaa! Your done! Go view your blog and check out the new look! 

I'd love to see your fresh new look, so please post a comment below with a link to your blog. And I'm always happy to help if you run into some glitches along the way!