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.
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.
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.
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.
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.
5. Add HTML to theme
Go to your Layout and, on the sidebar, click on Add Gadget (see photo below).
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.
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.
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.
0 Comments