How To: Install Social Media Icons on Blogger

A while back the lovely Torrie shared how to create social media icons... today I am going to show you how to install those social media icons on Blogger. 

Once you've followed her tutorial, you'll want to upload your images to an image hosting site. I use Flickr. To grab the link for the code, click on the image >> actions >> view all sizes. Once you're on the screen where you can select different sizes, select the size that will fit in your sidebar. You're going to right click that image and then you will have the link for your code. 

This is the code you will need for your social media icons. 

<a href="URLFORICON" target="_blank"><img src="IMAGEURL" alt="TITLE" width="165" height="55" /></a>

Change the information in red. In this tutorial I am demonstrating with our 'Twitter' social media icon so in the 'URLFORICON' section of the code I am going to put the URL for our Twitter account making sure to stay within the quotations. The image URL link you'll want to copy and paste [shown in photo above] in the 'IMAGEURL' section of the code being sure to stay within the quotations. The 'TITLE' section is just where you can put either 'Twitter' or which ever social media site this icon will be connected to. Or you could just put your blog name. Where the 'width' and 'height' numbers are in red is where you will input the image size for your sidebar. This is what your code should look like after all of the information is added:

<a href="https://twitter.com/byourownblog" target="_blank"><img src="http://farm9.staticflickr.com/8472/8434386280_3d51d80d0d_m.jpg" alt="B.You" width="165" height="55" /></a>

Repeat these steps for all other social media icons, making sure to save the complete code in Notepad or Word. Once you have all the codes completed, head on over to Blogger and go to 'Layout'. In your sidebar select 'add gadget'.

Then choose 'HTNL/JavaScript'

Copy and paste all of your codes then select 'add'. Be sure to preview your blog before you save to make sure that it all looks right. If it does, and everything is in place, select 'save arrangement' and then head back to your blog to make sure that the links work. If they don't, be sure that you copied the codes over correctly and that you stayed within the quotations when entering your information. If everything is running smoothly then you're good to go. You'll have a pretty new addition to your sidebar that represents you and all things connected to you. 

If you have any questions about the installation process or need help at all, let us know. You can leave us a comment below or send us an email at b.you.blog [at] gmail [dot] com.