How to Add Social Media Icons on Your Sidebar in Blogger

June 05, 2017

Learning to add functioning social media icons in your sidebar in blogger is important. Everyone's in social media and that's why you should let your readers know that they can also reach you anywhere, too.

I can't seem to find my source for this hack, will dig into it later and will credit my source. I call it hack because some instructions that I've first tried involved tweaking my theme's HTML, but this one's easier. So, let's start, shall we?

1. Choose your icons

Choose free icons from iconfinder and download it. There are a lot of icons you can use for free here and there are also icons for sale. If you really want to match your social media icons to your theme, then I suggest that you purchase it or you can also make your own. 

Make sure to download the .png files of your chosen icons. Once you've downloaded the icons, resize it using Adobe Photoshop or other image resizing tools that you usually use. 

Tip: Check the size your sidebar by using the Inspect element with Google. This is important to ensure that your icons aren't too big. 

2. Open a new post 

Open a new post and upload the icons you've resized. 

blogging tips in adding working social media icons in blogger sidebar or footer

3. Insert link

Once you've added the images, it's time to insert your links for your social media icons to function in your sidebar. Here's how you do it:

1. Highlight the icon and click on Link, as seen in the photo. 

tips on how to add social media icons and links in blogger sidebar or footer

2. You'll then be asked to add the link for the icon you've highlighted, as seen here, and just add the link and select 'OK.' Do this with all the icons. 

add social media links and icons in blogger footer and sidebar

Tip: Align the icons according to your preference, too. Just make sure that it fits the width of your sidebar. You can also add more icons and link more social media accounts on your blog in your sidebar or footer.

4. Get HTML 

Click HTML on the post, as seen below, to get the code. 

add a functioning social media links in blogger

You'll then see the HTML code, but don't panic, just let it be. All you have to do is copy the code. Make sure you don't change anything in the code. 

this is the html for your social media icons in blogger

5. Add HTML to theme

Go to your Layout and, on the sidebar, click on Add Gadget (see photo below). 

tips and tricks on adding social media icons sidebar or footer in blogger

Select the HTML gadget so that it'll be added to your sidebar, as seen below. You can also add the icons using the same HML code on your footer.

how to add html code for social media icons in blogger sidebar or footer

Once you've added the HTML gadget on your sidebar, click on edit. Paste the HTML code you copied from the post you made in step 2. 

simple tricks in adding html code for social media icons in blogger

Save it and go to preview. Adjust the sizes of the icons if it doesn't fit on your sidebar. 

Remember that the width of the sidebar differs according to the theme you use. So, make sure to get adjust the sizes of the icons accordingly,  

This is the simplest way I've read, so far, on how to add social media icons on Blogger, especially if you're not using their default themes. 

If you've tried this, let me know if it works for you, too.

You Might Also Like


Photos by