Tuesday, 28 May 2013

How To Add Buttons To Your Post Signature

Pin It!

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.



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!

29 comments:

  1. I can't wait to give this a try when I return home! Your tutorials are the best!

    Kristin
    www.exploringdomesticity.blogspot.com

    ReplyDelete
  2. thanks!
    maybe I will add them!
    love,
    denise

    ReplyDelete
  3. You seriously read my bloggie mind! Every time i think...how do i do that! You post on it! My blog is so new and you are saving me so much time and money! Thank you Thank you!
    Katie@mydiyhabits

    ReplyDelete
  4. I really need this tutorial!!! Pinning for safe keeping lol

    Jenny from diywithjenandb.blogspot.com

    ReplyDelete
  5. Great tutorial (b/c I need STEP by STEP instructions on anything 'techie')!

    ReplyDelete
  6. Thank you so much for sharing! I pinned so I don't forget to do this soon!

    Cheers,
    Julia
    It's Always Ruetten

    ReplyDelete
  7. oh cool, I had not thought of that- thanks

    ReplyDelete
  8. No surprise, I need this tutorial too! Thanks so much. Have a great day!

    ReplyDelete
    Replies
    1. Thanks :)

      Hopefully will be able to reply to your email later. I sat down last night to deal with my email backlog and my youngest son immediately started screaming. Kids have a wonderful sense of timing when it comes to getting sick!

      Delete
  9. Awesome tips ~ and lots of cute buttons!
    I'm visiting you today from Lil Luna. I co-host a Linky Party Tuesday (open thru Sat) and I'd love for you to link up! I hope you get a chance to stop by, link up and leave a comment, too!
    ~ Megin of VMG206
    Join me each Tuesday for Brag About It Link Up Party

    ReplyDelete
  10. THANK YOU!!! I've been trying to get this done and have it sorta figured out, but now I can perfect it.
    Corey from www.tinysidekick.com

    ReplyDelete
  11. I am visiting you from Family Home and Life. This is a very useful post. I have pinned it to my Pinterest-Blogger board. I will definitely give this a try. Thank you. Read about my series:
    http://www.thelostapron.com/summer-sewing-camp/

    ReplyDelete
  12. Found you on Wicked Wednesdays Link Up and just added your buttons to my blog! Thank you so much!!!
    Also, on your glitter buttons I think the turquoise download link leads to the wrong page... just fyi!

    ReplyDelete
  13. This is a great tutorial! Thank you so much. :-)

    ReplyDelete
  14. I need this tutorial! Thanks so much for sharing!
    Love your blog and now following via Bloglovin :)

    Melani @ MagsBeadsCreation
    www.magsbeadscreation.com

    ReplyDelete
  15. Thank you For Sharing!! This is GREAT!!

    ReplyDelete
  16. I can't wait to try this! Thanks:) I love your tutorials!

    ReplyDelete
  17. woohooo....I'm so doing this sometime this weekend....well getting hubby to do it sometime this weekend...haha...thanks so much for sharing....have a great day! xo

    ReplyDelete
  18. Thank you so much for the great tutorial. Need to do this soon.
    Thanks for sharing.
    Have a wonderful weekend,
    Bev
    @ Eclectic Red Barn

    ReplyDelete
  19. Thanks so much for the helpful tutorial, Angela! This is great! I popped over from Or So She Says...thanks for sharing!

    ~Abby =)

    ReplyDelete
  20. Great tutorial! Thanks so much for linking up at the Real Family Fun link party! Hope to see you next week.
    KC

    ReplyDelete
  21. Just saw your tutorial on Market Yourself Monday - thanks so much for sharing! I really need to do this and your tutorial is so easy to understand that I don't think I'll have any problems!

    ReplyDelete
  22. Great tutorial. Thanks so much for sharing with Adorned From Above's Blog Hop 55. We can't wait to see what you have for us this week. This weeks party is live.
    Have a great week.
    Debi and Charly @ Adorned From Above
    http://www.adornedfromabove.com

    ReplyDelete
  23. Great tips! Thanks so much :)
    -Lora

    ReplyDelete
  24. Thank you for this post. It was so helpful.

    ReplyDelete
  25. Thanks, very helpful post and nice buttons!

    ReplyDelete
  26. I wish you would move over to wordpress! You write the most inofrmative tutorials but they're irrelevant for me because they require blogger. lol.

    XO,
    CorinnaAshley

    (BTW I've been stuck on your site for 3 days straight now. Your link placement is superb and just when I think I'm ready to stop for a bit, I get sucked right back in!)

    ReplyDelete
  27. Thanks for the easy tutorial - great instructions and user friendly. I have always wanted to know how to add this to posts :)

    ReplyDelete

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