How to add social media icons

If you have social network icons you'd like to add to your blog sidebar (or somewhere else outside the post area) then this tutorial will show you just that. There are several ways to go about this, but this is what I recommend to make it fast, easy and as painless as possible 🙂  I will use my free social media icon banners as an example. You can download them here.   You can add these banners several places on your blog.
         
 
To use these images, you just need to get an HTML code for them. This is how to do that: (click on any image below to enlarge it) -You'll need to use a photo hosting website as a place to store the images you want to use.  I recommend Photobucket.com. It's fairly easy and free. Make an account with them if you don't already have one and you're ready to upload your images.

  -Upload the images you want to use  

Uploading with Photobucket

    -After you upload the images, head back to your library (or your Home page on Photobucket)

  -Click on the first image you'd like to load to your blog sidebar. On the right hand side, you'll see some different codes. You will want to use the HTML code. Click on the code and it will automatically be copied.

  -Now we want to take a little detour and set up your blog sidebar gadget. Go to your Blogger dashboard and then go to your Layout section. -Click on "Add a Gadget" to your sidebar
 
-Add an "HTML/Javascript" gadget
-Paste the HTML code from Photobucket here. You can continue pasting the different HTML codes until you have all of your images there. In the top right corner of the window you'll see the words "Rich Text". Click on that and you will see the icon images instead of the coding.
-Click and select the image you want to add a link to. Click the "Createlink" icon and you can now type the URL of your social media sites. For example, on the Pinterest button is highlighted below so I would add my personal Pinterest URL there after clicking the Creatlink button.
-Save and you have your custom social network icons!

Tutorial Instructions

Was that helpful? Check out our other tutorials to customize your blog even more!   Thanks!
  • Like our freebies? Use the share buttons below to tell your friends!
  • Want to be reminded when we put up new freebies and tutorials? Get Leelou Blogs newest posts sent to your email or in your blog reader. Follow us on FacebookTwitter, Pinterest, Instagram and sign up for our newsletter!
  • Help keep the freebies free! Make a donation today