How to Add Custom Social Media Buttons to Your Blog

First things first, you need to download your icons and save them wherever you store the images used on your blog..... Picasa Web Albums, Flickr, Photobucket, etc.  It's a bad idea to link directly to the site offering the icons because you will end up with a broken link if the image is ever moved or deleted.

Now it is time to write the button code. To make the code easy to understand, I have dissected it into it's essential parts.  Please click on the image to make it larger.

Anatomy of a Social Media Button

1. Inside the <a> tag, you link to your social media profile page using the href attribute.  href="URL of your social media profile"
2. Add target="_blank" to open the link in a new browser window.
3. Inside the <img> tag, you link to your social media icon image using the src attribute.  src="URL of your social media icon image"
4. Add height and width attributes to specify the size of your image in pixels.  This is where you resize your icon to fit your blog.  You can make the icon smaller, but I would not recommend  going larger than its original size.  height="height in pixels" width="width in pixels"
5. The alt attribute is required in the <img> tag.  It specifies alternate text for an image in the event the image cannot be displayed.  For example, the user has a slow internet connection, or in the case of a blind person using a screen reader.  alt="text describing what the button does"

OK! OK! You can think of me as one of those meanie school teachers who wanted you to understand the material instead of just memorizing it!  NOW that you understand the parts of the code, you may copy and paste, and fill in your info where appropriate.

<a href="URL of your social media profile" target="_blank"/><img src="URL of your social media icon image" height="desired height in pixels" width="desired width in pixels" alt="text describing the button"/></a>

Add Your Buttons to the Sidebar in Blogger

1. Open the Dashboard and click on your blog's name.
2. Click Layout located in the list on the left side of the screen.
3. Click Add a Gadget located above the sidebar.
4. A new window will open.  On the Basics tab, scroll down to find HTML/JavaScript and select it.
5. Add a title if you want one.  In Content type your button code as shown below.
6. Click Save.  Back in the Layout screen, drag your new button gadget to the location where you want it in the sidebar.   Click Save Arrangement in the upper right corner of your screen.

And that is it! Don't hesitate to shoot an email if you have questions.