I have been asked on a number of occasions how to create social media buttons for a Blogger blog. Basically you can turn any image into a link to a website very easily just by using an image of your choice and a bit of HTML code. I have written about this before on my "How To Make A Blog Badge" tutorial but you only need part of that code. Let's get down to basics.
First things first
Find an image you would like to represent your link. If you are looking for specific icons then a quick search for "free social media icons" is a great place to start.
Download the images (sometimes called a "pack") to your computer. Unzip the pack it if necessary (if you right click on the folder that you have downloaded you will see an option to unzip. You then save the images in a folder on your computer).
Upload the images to an online photo storage (I use Photobucket). Make a note of the direct link.
Coding
This is the basic HTML for your social media icon. Insert your own links where prompted by the bold text.
WEB LINK HERE" target="_blank">DIRECT IMAGE LINK HERE" />
Display it on your blog
Open Blogger > Dashboard > Layout
In your sidebar click the "Add A Gadget" link
Choose "HTML/JavaScript" from the selection in the pop-up box
Give this gadget a title
Copy your code and paste it into the gadget
Repeat for each social media icon in the same gadget
Save
Drag into place in the sidebar
Advanced coding
This is the advanced HTML for your social media icon. Insert your own links where prompted by the bold text.
WEB LINK HERE" title="DESCRIBE YOUR LINK HERE" target="_blank">DIRECT IMAGE LINK HERE" width="IMAGE WIDTH HERE" height="IMAGE HEIGHT HERE" />
The title is the text that appears when visitors to your blog hover their cursor over the image
target="_blank" allows the link to be opened in a new tab/window so that your reader does not leave your blog
Width and Height determine the size of the image (in pixels) which means you don't have to consider resizing. A good size to use is 50 x 50
Hints And Tips
You can use any image, even ones you have taken yourself overlaid with text. Be creative.
Use the tags
and
at the beginning and end (respectively) of your social media icon code to balance the code in the middle of the gadget
Use the tag
to create a new line (line break) if you have more icons to display than the width of your sidebar, eg:
twitter icon code, facebook icon code, pinterest icon code
google plus icon code, email icon code, rss feed icon code
To create an email icon code your code needs to read:
YOUR EMAIL ADDRESS HERE">DIRECT IMAGE LINK HERE" />
Let me know how you get on...
Feel free to ask me any questions and I'll post the usual troubleshooting as replies to comments or as edits in this post. This post is also linked from my Ask A Blogger Geek website
This is the official feed of www.iamtypecast.com
Content on this feed may not be used or reproduced without permission.
© Nickie O'Hara 2009-2012
twitter | facebook | g+ profile | tumblr
