Wednesday, 10 April 2013

How Do I Add Buttons to my Blog?

Pin It!

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



It's great to add social media buttons to your sidebar to make it easy for people to follow you. To do this on Blogger you will need to go to your dashboard then select Layout/ Add Gadget/ HTML/Javascript.



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:atypicalenglishhome@yahoo.com"><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.

42 comments:

  1. Great tutorial Angels. I'm looking to update my buttons. I've also tried to add a pin it button to each of my photos, but it seems to have stopped working when I changed templates - any ideas?

    ReplyDelete
    Replies
    1. Tricky question to answer in a comment box! Especially since there are numerous ways of adding Pinterest buttons (inserting code in your template, inserting it in individual posts, using third party "pin it" buttons, using your own buttons, etc).

      But coincidentally I do have this topic scheduled in for next Tuesday (the 16th). So if you can hold out till then hopefully my tutorial will answer your question? I find it easier to explain my "how tos" when I can include pictures :)

      Delete
  2. Thanks for this tutorial! I am going to flag and do this when I get home from work! A huge help as I am trying to expand my blogging!

    ReplyDelete
  3. I love when blogs post tutorials like this. I have a degree in Graphic Design, but didn't study so much on HTML and CSS, something I plan to keep self-teaching myself. But if not for tutorials like this, it would be hard to get started. Newest follower from Someday Crafts - oh, and am now using your Bubblegum icons, thanks so much! Hope you'll follow back at www.styleoyster.blogspot.com

    ReplyDelete
  4. OMG...you have written such an amazingly simple-to-follow tutorial. Thanks so much. Many have wished they knew how to do this but did not.

    Thanks for adding this link to my blog hop today. Everyone will gain much from it. :)

    ReplyDelete
  5. Visiting from Earning My Cape...pinning too! Hope you can stop by as well! Blessings!

    ReplyDelete
  6. Pinning this! Thanks so much.

    Maria
    http://kraftycardsetc.blogspot.com/

    ReplyDelete
  7. Great tip! Thanks for sharing it at the Pinterest Power Party!

    Danielle
    SewMuchCrafting.com

    ReplyDelete
  8. I so need to do this, thanks! visiting from Sew Much Ado

    Sarah
    www.bluesusanmakes.blogspot.com

    ReplyDelete
  9. Thank you for sharing! I have been looking into this for quite sometime and many that I found never worked!!

    Ashley
    www.essentialschic.com

    ReplyDelete
  10. Thanks so much for the info!!

    ReplyDelete
  11. Good to know! Thanks for sharing. I'm going to have to pin this one!
    Sara

    ReplyDelete
  12. I've been doing a growing your blog series, and though I knew most of this you helped me understand the "mailto" coding. A lot of the bloggers who check my growing your blog series would benefit from this!!!! I was hoping that you could share this post on my Sunday Link Party!! I'll host it every week, and welcome you!

    Abbi @ Seasons of a Homemaker

    ReplyDelete
  13. Great tutorial! Would you mind to link this to my blog hop? I think we've got some readers who would love to see this. Thanks :)
    http://carriethishome.com/2013/04/frugal-crafty-home-blog-hop-19/

    ReplyDelete
  14. This a great help for me! I've been looking for this for a month now! Thank you for sharing! I am a new follower now!

    ReplyDelete
  15. Awesome!!! Thank you so much. This has been driving me crazy, and now I know what to do...YEAH :)

    ReplyDelete
  16. Thanks for this! You're awesome!!
    Jamie @ somuchbetterwithage.com

    ReplyDelete
  17. Such Great info! I am off to read about the fonts! Thank you so much for sharing on Show Me Your Plaid Monday's!

    ReplyDelete
  18. Thank you for posting this. It's something I've been wondering about and this will save me the time of trying to figure it out! :)

    ReplyDelete
  19. Thanks for bringing this by What'd You Do This Weekend? Hope to see you next Monday. Have a great weekend.

    Linda

    ReplyDelete
  20. Oh my word! The joy I got when it finally worked! Thanks so much! Such a useful tool! Ps: the print screens are really useful.
    Thanks!

    ReplyDelete
    Replies
    1. I still that little surge of happiness when a bit of coding works and makes my blog prettier - and I've been messing about with websites for half my life! Glad you found the tutorial useful :)

      Delete
  21. THANK-YOU!!!!!! I am so html dumb so this was a huge blessing to me!

    ReplyDelete
  22. This information was very helpful! You walked me through perfectly on how to add social buttons to my blog. I can't thank you enough!! It looks great, I'd love for you to come over and take a look @ gloriouslymade.blogspot.com.
    Have a great day,
    Deanna

    ReplyDelete
  23. Hi Angela!
    This is really helpful - thanks!
    I have one question - my blog is hosted through wordpress (I have my own domain and host)....where would I add buttons using wordpress???
    I know nothing about HTML/code/techy stuff.....please help me!!!
    Ruth

    ReplyDelete
    Replies
    1. Hi! I've never used Wordpress, but hopefully this page will help:

      http://en.support.wordpress.com/widgets/text-widget/

      You need to add the Text widget from Appearance>Widgets.

      Hope that helps.

      Delete
  24. Thank you for this tutorial, it's really helpful! I tried to add your glitter social media buttons and the tutorial was spot on, but the buttons still show the checkered background where it's supposed to be transparent. Do you know what I did wrong?

    ReplyDelete
    Replies
    1. I had a similar issue when I changed my header and social media buttons recently. I found the problem was due to a change in the way Google uploads images - it tries to auto enhance them or something. Perhaps you're having the same problem?

      These were the directions I followed to sort it out:

      http://productforums.google.com/forum/#!category-topic/picasa/picasa-web-albums/phLFYooWlD0%5B1-25-true%5D

      Hope that helps you!

      Delete
  25. This is great information! Excellent and simple to follow!

    ReplyDelete
  26. Thank you so much! This worked perfectly and now I'm feeling quite proud of myself ;)

    http://www.motheringwithcreativity.com

    ReplyDelete
  27. Great tutorial! The only problem is...my links don't work :( The images are there, but for some reason they don't link to the social media sites. It keeps on telling me "Tag is not allowed: IMG"

    but it's not working :( any tips?

    http://vitadibella.blogspot.com

    ReplyDelete
    Replies
    1. Hi there! Your social media URLs seem to have your blog URL in the address tag too. I can see that you have an email address on your blog, I'll email you the correct HTML code for your social media buttons.

      Delete
  28. Thank you so much! I did it and it works perfectly!

    ReplyDelete
  29. These are amazing!!! Thank you!

    ReplyDelete
  30. A massive thank you for your buttons and tutorials, they're brilliant and hopefully help make my blog look a bit prettier x

    ReplyDelete
  31. I have a question. Everytime I upload the image to my Picasa viewer I the image is becoming covered with gray checkers. Why is this happening and what can I do to prevent it?

    ReplyDelete
    Replies
    1. Hi Jessica. The gray checkers represent the fact that the background of an image is transparent (rather than just white). When you use the image on your blog/website you will find that the checkers don't actually show, and the image will appear as expected.

      Hope that helps!

      Delete
  32. Wow! I found your blog and your wonderful tutorials today through Pinterest. I am in the mist of re-working my blog and have found the answers to some of my questions I've had for a while about HTML and layouts.

    Your tutorials are simple, helpful, and exactly what I was looking for!!

    I'm now following your blog, Pinterest, etc and going to continue browsing the other posts for ideas and tips.

    I know you get this a lot, but THANK YOU (that never gets old, right?)

    ReplyDelete

Thank you for taking the time to leave me a comment. I try to respond to as many as possible. :)