Add Social Icons to Your Sidebar

Many of you have asked how to add social icons in your sidebar. Today I am going to show you how!

Let’s get started. Here is the example that I am going to use for the tutorial today. We are going to add social icons ….

First you will need to make or find the actual images you would like to use for your social icon images. You can make them using photoshop, gimp, paint, etc…Or if you google “social icons,” you will find plenty of sites where you can download them for free!

Once you have the images made/downloaded and saved to your computer you will need to upload them to photobucket. Once you have uploaded them to photobucket you will need to copy the “direct link.”

It looks like this …

Okay now login to your blog dashboard > layout and click on “Add a New Gadget.”

Add a new HTML/JavaScript gadget.

Now paste this code into the box :

<a href=”URL GOES HERE“/><img src=”DIRECT IMAGE URL FROM PHOTOBUCKET GOES HERE“/></a>

Next, replace the red parts of the code with your own personal links. 

If you would like to place another icon next to the first one simply paste the SAME code right below your first chuck of html code only swap out the urls. You can repeat this as many times as you would like. So you may end up with a big long piece of html code, depending on how many icons you want to have.

If you want to check and make sure that you code is correct, click “rich text” in the upper right hand corner of the HTML Gadget.

And that’s it! You’re all done!!

Oh and, if you want your social icons to be in the center of you sidebar you can read this helpful post.

Not working for you??? Here are some trouble shooting tips:

Make sure the you didn’t erase any quotation marks.

Double check that you have all the brackets.