Since posting Free Social Media Icons in Pantone Fall 2012 Inspired Colors, I’ve had several requests for a tutorial showing how to link an icon to a social media account. So here we go! 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
- Inside the tag, you link to your social media profile page using the href attribute. href=”URL of your social media profile“
- Add target=”_blank” to open the link in a new browser window.
- Inside the
tag, you link to your social media icon image using the src attribute. src=”URL of your social media icon image”
- 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”
- The alt attribute is required in the
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”
Add Your Buttons to the Sidebar in Blogger
- Open the Dashboard and click on your blog’s name.
- Click Layout located in the list on the left side of the screen.
- Click Add a Gadget located above the sidebar.
- A new window will open. On the Basics tab, scroll down to find HTML/JavaScript and select it.
- Add a title if you want one. In Content type your button code as shown below.
- 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.
