This is a question that's popped up a few times recently, so I decided it was time to create a proper tutorial for adding buttons to your signature. If you coped with my "adding social media buttons" tutorial then this should be super easy for you!
Taking the time to add social media icons to your signature makes it simpler for people to subscribe if they've enjoyed the post they've just read - I definitely saw an increase in followers after doing this.
Step One - Get Some Social Media Buttons
You can't add social media buttons to your post signature if you don't have any buttons! I currently have two sets of free social media icons available.
Get my rainbow social media buttons.
Get my glitter social media buttons.
After you've downloaded the images you want to use, upload them to your favourite image host. You'll need to know the image URL for the next part.
For Blogger users that have stuck with the site's default image host, Picasa, this is where you get the image URL:
Note that the 'Image only (no link)' box is checked.
When using Picasa, always make sure that the site has not automatically re-directed you to a Google Plus album. If it has, look for the yellow banner that will take you back to Picasa - at the time of writing, you cannot get your image URL from Google Plus.
Step Two - Create Your Code
I find it easier to edit the HTML code I need in Microsoft Word, and then paste it into the Blogger template. You could also use Notepad.
Every button you see on a website is basically a hyperlinked image. So to add a social media icon, this is the HTML code you will need to use:
<a href="WebsiteAddressHere"><img src="ImageAddressHere" width="Width" height="Height"></a>
To create a button that will take your reader to the designated social media page, you will need to edit the information that I've put in bold.
WebsiteAddressHere - This is the webpage URL, where you want to send people to sign up to be a follower. It will look something like http://pinterest.com/AngelaATEH/.
ImageAddressHere - This is the image URL, like the one in the Picasa example I showed above.
Width - Enter a number to determine the size of your button. A number like "60" would be about average for a social media button.
Height - This is likely to be the same size as your width.
You can take out the width and height commands if you don't mind the buttons showing as their original size.
This HTML code will need to be repeated for every button you want to show. Your code will probably look a little like this when you are done:
Now all you need to do is copy and paste it into your template.
Step Three - Add The Code To Your Post Signature
To add buttons to the bottom of your blog posts go to the Blogger dashboard and navigate your way to Settings/Posts and Comments.
Copy (CTRL and C) the HTML code you created in your Word or Notepad document, then paste (CTRL and V) the text into the 'Post Template' box. Save the changes.
This method will not automatically add social media buttons to your old posts. But whenever you create a new post from now on the buttons will be right there. You just compose the rest of your post like you normally would.
Additional Blog Tutorials You Might Like
I have lots more blog related "how to" posts in my tutorials section.
If you liked this post, other topics you might like are:
Find out how to add social media buttons to a sidebar. I also covered how to add an email button in this post, so check this tutorial out if you want to put an "email me" button in your post signature.
Want to sign off each post with your name? My "how to add a signature in Blogger" post shows you how.
If any part of the tutorial wasn't clear enough or you're having problems, leave me a comment!