I recently posted a little tutorial on how to install fonts because I get that question a lot, and it was taking a while to individually reply to people. And since that post was received so well I'm now going to tackle another common question; how do I add buttons to my blog? I'm taking the angle of adding social media buttons to a Blogger blog, but the HTML code can be used for any buttons or clickable images and on any type of website.
First Things First...
Before you start fiddling with HTML the first thing you need to do is find some great images to use as your buttons. You might want to make your own, but if you aren't great with graphic software there are plenty of free social media icons available for free (free social media icons here).
These will then need to be uploaded to a graphic hosting service like Photobucket or Picasa. You will need to copy the direct link address for the image and paste it into your HTML. I use Picasa and the information you need is here:
Don't forget to check the "Image only" box and select the text under "Embed image" rather than "Link".
HTML Code for Buttons
The HTML code for creating a button (or hyperlinked image) is:
<a href="WebsiteAddressHere"><img src="ImageAddressHere" width="Width" height="Height"></a>
You will need to edit the following bits of code:
WebsiteAddressHere - this is the URL of the page you want the button to take your visitor to.
ImageAddressHere - this is the direct link for the image, which I mentioned above.
Width/Height - this is the width and height, in pixels, of your button. It is handy to include this information in the image tag to make it easy to resize your icons, but you can take it out if you are happy for the buttons to display in their original sizes. (N.B, I tend to make my buttons about 75 pixels wide).
Adding Social Media Icons to your Blogger Blog
Add in your HTML code. It might look something like this:
Which will produce social media buttons that look like this:
HTML isn't so scary, huh? But hang on a second, you might be about to hit a problem...
How to Add an Email Button to your Website
So you're feeling all cocky because you've discovered that it isn't so difficult to add a bit of custom code to your blog after all. But then you try to add an "email me" button and you suddenly realise you have no clue what to put where it says "WebsiteAddressHere". Well, the HTML code for adding an email button is:
<a href="mailto:firstname.lastname@example.org"><img src="ImageAddressHere" width="Width" height="Height"></a>
Obviously, you need to replace my email address with your own. There are no spaces between "mailto:" and the email address.
I believe that covers everything you might need to know about buttons, and in particular adding social media icons to your website. But if anything isn't clear or you have further questions please leave me a comment below or drop me an email.