HOW TO: Add Social Media Icons to your Sidebar (Blogger)

I do not consider myself an expert blogger or html master by any means, however whenever I learn something new that benefits me, and I know will benefit others I do feel compelled to share so that you can give it a shot as well! 
After over two and half years of my blogging career, I have finally created and added social media icons to my sidebar!
I'm always looking to do things myself, so when I came across Emily's video from Blogoholic Designs, I quickly (as in half an hour) followed suit and created my own social media icons! Thanks Emily! In an effort to help relay the information, I have attached the link to Emily's video, as well as step by step instructions that demonstrate how I was able to create the buttons! I hope you are able to find this very helpful and informative!

ONE: SEARCH AND DOWNLOAD SOCIAL MEDIA ICONS  I searched "social media icons" on Pinterest, and decided to go with these ones from green leaf imaging. Make sure that you are legally able to download them from the designer.

TWO: RESIZE THE ICONS Once you have downloaded the icons to your computer, open the files that you would like to implement on your blog and resize them to your desired size. The original size of the icons that I used were too large so I adjusted them all to be 0.15" x 0.15" with a resolution of 180 pixels. They did appear blurry after I changed them, however they turned out fine on the blog. I double clicked on each image and used the standard mac "preview" application to adjust the size (click tools > adjust size...). Notice the significant size difference in size once it was adjusted.

THREE: GO TO YOUR BLOG AND CREATE A NEW POST VERY IMPORTANT: MAKE SURE YOU DO NOT PUBLISH THIS POST. This step was used to help create an HTML format/code for the sidebar. Emily recommended naming the post "SOCIAL MEDIA ICONS: NO NOT PUBLISH OR DELETE". 

FOUR: IMPORT EACH OF THE DESIRED SOCIAL MEDIA ICONS INTO THE NEW POST Click the "Insert Image" button and select each of the icons that you would like to use. Line the images up horizontally by backspacing in between each one, and make sure each icon is centered. I went ahead and put two spaces in between each icon. The bottom picture demonstrates how it will look on my blog.

FIVE: ADD A LINK TO EACH ICON Click on an icon and then click the "Link" button. Highlight and add the corresponding link to that button. Simply copy the link from the webpage, and paste it into the box. I like to click the "open this link in a new window" button so that my original blog page doesn't disappear. Do this with each of your icons. If you plan on using the "mail" icon and would like to connect an email address, be sure to click the "email address" button and inset your desired email address.

SIX: COPY THE HTML FORMAT INTO A NEW HTML/JAVA SCRIPT GADGET You have been working in the "compose" section, so now you need to click the HTML button and switch everything over to the HTML coding. Copy that code. Open up a new page with blogger and click on the "layout" tab. On the lower right hand side, click "Add a Gadget", and select the "HTML/JAVA SCRIPT" option. Copy your HTML code into the box and give the box a label if you would like to, some prefer not to. Click "SAVE" > "SAVE ARRANGEMENT" > "VIEW BLOG" to see the completed project.

Test the buttons out to make sure each one correlates to the appropriate link.
Good luck!
I've linked Emily's video below. If you use Wordpress, she has a tutorial here that will help!