Shell's Tutorials: social media buttons

My friend has started her own blog and needs some help getting it set up so I've offered to do some tutorials for her.

I sent her the link to this social media buttons tutorial on Geekalicious but she's not very confident in her abilities yet and needed some extra instructions so I've done some screen shots for her.

Step one:

Download some social media buttons. I just did a Google search for free ones.

I only wanted a few from the pack, such as Facebook, Twitter etc so I clicked on the downloaded folder to open it and selected the buttons I wanted.

Step 2:
Copy (or right click and extract) the buttons you need into your blog folder

Step 3:
Upload your buttons to a web site like Photobucket

Step 4:
Click on the first button to select it then click on the link icon to open up the image links

Step 5:
We'll be using the Direct code for our blog buttons. When you click on the html code, it will automatically copy it to your clip board.

Step 6:
First though, we need to go to blogger and click on Layout

Step 7:
Click on Add a Gadget

Step 8:
Click the plus icon next to HTML/JavaScript

Step 9:
When the html window opens, type in the code from the Geekalicious tutorial

Step 10:
You can fill in the title or leave it blank, it's up to you. This is what it should look like:

Step 11:
Delete the words, DIRECT IMAGE LINK HERE. Now go to your Photobucket account and click on the HTML code to copy it. Click between the two quotation marks and paste the html code.

Step 12:
It should look like this:

Step 13:
Now delete the words, WEB LINK HERE

Step 14:
Go to your social media website. Make sure you're on your own profile, in this case it's Twitter, and copy the code from the address bar. Click in between the quotation marks (see arrow in above screenshot) and paste the web address of your social media profile.