How to Add Social Media Icons To Blogger

In this tutorial, I will show you how to add social media icons to your Blogger blog. This tutorial includes free social media icons to get you started.

1). In Blogger, create a new post and upload your social media icons to the post.

After uploading your images, if prompted, select the following:

2). Select the HTML tab. After doing this, you’ll see the image links for each of your social media icons. Leave this window open.

3). Open a new tab. In your Blogger dashboard, select Layout.

4). Select Add a Gadget in your “sidebar-right” area and then choose the HTML/JavaScript gadget.

5). In the HTML/JavaScript box, paste the following code (do this for each social media icon):

<a href="URL Goes Here"><img src="Image Direct Link Goes Here" /></a>

6). Head back over to the post editor where you uploaded your social media icons. Copy the image link for one of your icons (as seen in step 1).

7). Going back to your HTML/JavaScript gadget in Blogger, paste your image link where it says Image Direct Link Goes Here (do this for each social media icon and keep it within the quotation marks). It should look something like this:

<a href="URL Goes Here"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3k9xyCWS7j6UUtjWVHuT3cSwGQBmo9e8gQY4KZJRaJvhePDDvFJrogQ1d86GEoeAKjmvy6llHwoi4iH2GKsK2dhPDRTYDcr5oxryFPP7nHrNjvAWWN_LjuvWR5SOybXL2u5H4KdZ6S50/s1600/icon-facebook-1.png" /></a>

8). Now it’s time to add in your social media URLs. Leaving the HTML/JavaScriptgadget open, in a new window or tab, head over to your social media profile and copy your personal URL.

9). Now, back in the HTML/JavaScript gadget, paste your URL where it says URL Goes Here (do this for each social media icon and keep it between the quotation marks).

10). Select Save once you’re finished. The finished code should look something like this:

<a href="https://www.facebook.com/BeautifulDawnDesigns"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3k9xyCWS7j6UUtjWVHuT3cSwGQBmo9e8gQY4KZJRaJvhePDDvFJrogQ1d86GEoeAKjmvy6llHwoi4iH2GKsK2dhPDRTYDcr5oxryFPP7nHrNjvAWWN_LjuvWR5SOybXL2u5H4KdZ6S50/s1600/icon-facebook-1.png" /></a>

Note: If you’re using an email/contact button, place mailto:youremailaddresshere between the quotation makes where it says URL Goes Here.

11). Feel free to remove the post draft you created.

Happy blogging,