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.
UPDATE: Due to the recent changes with Photobucket charging $400 yearly in order to use their service, I’ve updated this tutorial showing you how to host your images via your own Blogger account.
In Blogger, create a new post and upload your social media icons to the post.
After uploading your images, if prompted, select the following:
- Image alignment: None
- Image Size: Original size
Select the “HTML” tab. After doing this, you’ll see the image links for each of your social media icons (I have highlighted the link below). Leave this window open.
Open a new tab. In your Blogger dashboard, select “Layout.”
<a href="URL Goes Here"><img src="Image Direct Link Goes Here" /></a>
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).
<a href="URL Goes Here"><img src="https://3.bp.blogspot.com/-nCoP8tLzxwE/WVq3ZFw_fEI/AAAAAAAAN0Q/CF60HjN2aI02ePhN_aJqcHH6vaI082NJgCLcBGAs/s1600/icon-facebook-1.png" /></a>
Select “Save” once you’re finished. The finished code should look something like this:
<a href="https://www.facebook.com/BeautifulDawnDesigns"><img src="https://3.bp.blogspot.com/-nCoP8tLzxwE/WVq3ZFw_fEI/AAAAAAAAN0Q/CF60HjN2aI02ePhN_aJqcHH6vaI082NJgCLcBGAs/s1600/icon-facebook-1.png" /></a>
Note: If you’re using an email button, place mailto:youremailaddresshere between the quotation makes where it says URL Goes Here.
11. Feel free to delete the post draft you created.