How to Add Custom Social Media Icons to Your Sidebar in Blogger

Hi lovelies,

So today I'm going to be showing you how to add custom social media icons to your blog's sidebar. While this HTML code will work fine with Wordpress and other blogging platforms, I've never used anything other than blogger, I don't know to add custom HTML to any other blogging platform.

Anyway, this was one of the first little bits of code I learnt and it's incredibly useful. Also, once you've got the hang of this, you can use the same bit of coding know-how to add other little bits and bobs to your blog sidebar.

Because this is a very repetitive bit of coding and very easy and very useful, I'm going to teach you how to do this yourself, rather than just give the code. (However, if you aren't at all interested in learning a bit of HTML coding, you can just scroll down to the bottom of this post and grab the code from there).

Otherwise, let's crack on!

First up, you need to get yourself a set of social media icons. I know that Rose from Every Little Polish has a couple of sets of free downloads here, here and here, or you could just google it or if you're feeling particularly arty, make your own set on a editing software like Photoshop or Gimp.

Once you've got those, you need to upload them to a online photo hosting service (I use Photobucket)

Next (for Blogger), you need to go into Layout and click Add A Gadget. In the box that pops up, you need to select HTML/Java Script.

In the box that pops up we are going to put our code. Ready?

First off, we need to specify what link we want to go to when we click the icon. To do this, we use this code:

<a href="YOUR SOCIAL MEDIA URL HERE"></a>

But, we want to open this link in a new tab, so that when you click on the link, you aren't directed away from your site. To do this we need to add 'target="_blank"' to our code. Now it looks like this:

<a href="YOUR SOCIAL MEDIA URL HERE" target="_blank"></a>

Now we know where this link is going to go, we need to put in an image for people to see. To do this we add this you have to grab the full image url of your chosen social media icon (which you uploaded to Photobucket or a similar service earlier and add this to our code:

<img src="YOUR IMAGE URL HERE">

Our code so far looks like this:

<a href="YOUR SOCIAL MEDIA URL HERE" target="_blank"><img src="YOUR IMAGE URL HERE"></a>

Now you can leave that code as it is and that will work just fine. However, your images might not be quite the size that you want and we can fix that by adding an extra little bit of code that specifies the height and width of your images so your code looks like this:

<a href="YOUR SOCIAL MEDIA LINK HERE" target="_blank"><img src="YOUR IMAGE URL HERE" height="NUMBERpx" width="NUMBERpx"></a>

When entering the number, the 'px' after it stands for pixels, so don't forget that! Have a play around with the height and width of your icons in order to get them looking as good as possible!

Then, just repeat the same proccess using different links and image urls for all the rest of your social media icons.

If you were wondering, to add an email icon that sends an email to you when clicked, use "mailto:YOUR EMAIL ADDRESS" as your social media url.

And that's it! Pretty easy, right? I hope this was useful to you and if you use this tutorial to add social media icons, I'd love to here about it and see them in action so drop me a line and leave your blog url in the comments box, along with any questions you might have.

You can also use the same bit of coding to add any other image to your blog with a link, or, if you just want an image, simply get rid of the first bit (with the href part).

If you're looking to further customise your blog then you might want to check out my tutorial on how to Centre Your Page List in Blogger.

Happy blogging!