How to add Social Media Icons on Blogger

Since I am not very much knowledgeable with CSS, HTML and Codes. I had a very hard time, customizing this blog. And since I promised that I would be here to do posts on a regular basis, I want my blog to be something nice to look at and so I have searched high and low for "how to's" in order to help me reach my goal appearance for the blog. And so for the next couple of posts, I would share to you how I applied those tutorials.

First of this series is how to add those cute little social icons on your sidebar.

HOW TO ADD SOCIAL MEDIA ICONS TO YOUR BLOGGER

STEP 1:

Before we can start adding social media icons, you'll need to find a set. There are sites who offer fabulous sets for free or if creativity is kicking in, you can just make your own! Just take note that if you choose to download or make them in a square shape, they can be in JPEG or PNG format. But if you choose to download or make them in circles or other shapes, they should be in PNG format. 

STEP 2: 

Once you have your social icons ready, you need to upload them to an image hosting sites like Photobucket, Flicker, Picasa or the like. I have been using Photobucket for the longest time now and I have never had any problems so far. 

STEP 3: 

Next step is to find your image's URL now. If you stored your Photobucket, you'll see a gear icon on the top right hand side of each image. Click this and choose "Share". Go to "Links" and click the link on the "Direct" tab to copy. (See image below)

STEP 4:

Go to your Blogger Dashboard. Head on to the "Layout" section. Once you're there, Click add   "Add Gadget" on the area where you want your social icons to appear. (See image below)

A window will pop up with several gadgets to choose from. Choose "HTML/JavaScript" (See image below)

 The new tab that will pop up is where we'll be adding the HTML Code. 

STEP 5:

In this new page, adding a "Title" is optional. Some bloggers prefer it to be left blank for a much cleaner look however, some places in titles like "Follow me", "For more updates" etc. In the big blank box, copy and paste the following code:

<a href="http://www.YOURWEBSITEADDRESS.com"><imgsrc="http://www.URLOFIMAGELOCATION.com" height="32" width="32" /></a> 

(See image below)

http://www.YOURWEBSITEADDRESS.com - place here the site links of the corresponding social site of the icon that you want to use. (for example: http://www.facebook.com/chicaccents) 

Should you wish to link the icon to your email address, you may use this template: 

<a href="mailto:YOUREMAILADDRESS"> 

So it should appear similar to this: <a href="mailto:chicaccents@gmail.com"> 

http://www.URLOFIMAGELOCATION.com - this is where you will paste the link that you copied from Photobucket or your image hosting site earlier. 

height="32" width="32" - this is the size of your icons. You may change it according to your blog's needs. (for example: height="72" width="72" or height="100" width="100")

You may keep on adding this same code over and over again after each code if you want to add more icons. Just don't forget to change the URL's accordingly. (See image below)

  

 Click "Save".

 And that's it, your done!

I just hope that this post helped you with your dilemma. I know the feeling of being frustrated with the customization and everything. But I don't want to deprive my blog with the possibility of looking good. We just have to take time to learn new things and techniques. :)