Need some help with basic Html/CSS code - Part 2 - How to add Social Media buttons on Blogger

 Adding Social media buttons to my sidebar on Blogger was something that I attempted a few times before I actually got it to work. I am going to explain this step-by-step, so hopefully it won’t be too overwhelming or confusing.

* Note, save your work as you go along. You definitely don't want to lose all your hard work.

Step #1
 Choose your social media icons.There are many free icons available so just go onto Google and type 'free social media icons' and pick the ones that you like best. Here are the ones I opted for display to the right. ➠

Step #2
Download the icons to your computer.

Step #3
 Log onto Blogger and click on "New Post." Upload the icons/images to blogger. Click on the "HTML" tab and then copy the address of the image.

* Note, it may be easier to add the images to blogger one at a time so you don't accidentally copy the wrong address.

 I then paste the address in my Coolreader app (copy it down, save it to clipboard etc.) When you've finished the process for each image just delete the post that you added the icons to.

Step #4
  Go back to Blogger Dashboard, and go to the “Layout” tab on your left. Click it, then look at the layout of your blog and find the little rectangle that says “Add a Gadget.” Click on that. A new window will pop up, scroll down until you see “HTML/JavaScript.” Clicking on that will open a new window that says “Configure HTML/JavaScript.”  In the “Title” bar, type in what you want your header to be. (Mine is Socialize with me) After you’ve done that, minimize that screen and we will come back to it later.

Step #5
 Copy the code below EXACTLY, then reopen your minimized “HTML/JavaScript” window, and paste into the space that says “Content.” The code is designed for one individual icon so make sure that you use the code for each one of the icons you want.

 <a href="http://YOURSOCIALMEDIALINKHERE"/><img src="YOURIMAGELINK"/></a>

Step #6
We are almost there! Your doing great :-)   Choose which icon you want to appear first. Delete what is written in RED, do not delete anything else or the code will not work.

Step #7
  After you've done this minimize the “HTML/JavaScript” Gadget window again, and go to the website that you want to be directed to (facebook, twitter, etc.) Copy the URL/web address at the top of that screen. Reopen the minimized window with your code, and insert that address within those first parentheses where the words in red were.

Step #8
 You are going to do basically the same thing within the second set of parentheses. Delete everything that is written in BLUE. Minimize the window. Go back to wherever you saved the address for your icon images earlier. Copy the one that corresponds with the social media link address you just inserted in the first parentheses (the red.) Go back to your “HTML/JavaScript Gadget window with that address, and insert in the second set of parentheses where the blue words were.


Step #9
 Repeat for your remaining icons.

Step #10
 Save. Now go to your blog and check out what you just accomplished. Then give yourself a much deserved pat on the back.

For Email links to work, the code is slightly different. Use this code:

<a href="mailto:YOUREMAILADDRESS"/><img src="LINKTOYOURIMAGE"/></a>

That's it, your all done. Great job!

 I really hope that this helps someone. I’m still learning this coding stuff and I hope this wasn't very confusing, but I wanted to make adding social media icons to your blog a little less painful then my first attempt. Please feel free to leave comments or questions, and I’ll try to answer them as best I can.