How to Make "Pretty" Social Media Buttons

Summer vacation is the perfect time for a blogging teacher to freshen up a site. 

Do you want blog buttons that match the theme of your blog? 

Here are the directions:

1.) Designs your icons. I designed mine in Powerpoint. (That is my preferred program when I create products for my classroom, so I am familiar with it.)

2.) Upload them to the site where you store pictures. I use photobucket.  

 

3.) Open up your blog. If you’re a Blogger user, go to Layout, and add a gadget. The gadget you’ll need for this is called “HTML/Javascript”. For the title, write what you’d like to appear as the title – "Follow me".  

4.) In the Content section, paste the HTML you’ve amended for your own site.

For each icon that you want to add to your site, you’ll need the following HTML:

<a href="SOCIAL MEDIA LINK"><img alt="ALT TEXT HERE" src="RELEVANT IMAGE LINK" width="50px"></a>

5.) Replace the “Social Media Link” part with whichever profile you want to link and put the image URL to the icon that relates to that profile. Replace “Alt text here” with something like “Follow me on Twitter” (Though for mine, I chose not to have any text and deleted the text in between the quotation marks.) 

6.) Replace the text "Relative Image Link" with the  URL to the site where you stored your image (i.e.Photobucket). I love Photobucket because this step is easy. You just click on the image you want to use from your library. To the left you will see a list of addresses for your image. Click in the box "HTML"; it will automatically copy the link for you. 

 *Note* As you cut an paste, be sure to keep the quotation marks. Paste your links within the quotation marks. 

7.) Repeat as necessary until you have a block of HTML for each profile. Put it all together, and leave no spaces between it if you want the icons to appear in a row.

8.) At this point I saved it and viewed my side bar...oh no! The icons were too big! Not a problem... go back to the template and click on "edit" on the gadget you just added. Once there notice "Rich Text" mode? Click it. 
Now you are in IMAGES, so you will see all your buttons as images.
In this mode you can: drag and drop your buttons to new locations, resize buttons, and line up buttons next to each other. 

This is how I created the social media icons on my right side bar. 

For more tech help, be sure to check out my Pinterest board "Social Media & Technology".