Sunday, June 10, 2012

How to Add Custom Social Buttons to Blogger

Have you seen those adorable social buttons that have been popping up on  blogs lately? Well, I just had to have them because they're soooo cute! Plus, I didn't really like having all of the different "follow me on..." widgets on the side of my blog. Wondering how to do it?

Step 1: Find your buttons. You can make them, or do a search and save the ones you like. I made mine and will be posting various versions of them for you on tomorrow's Made It Monday post.

Step 2: Upload your buttons to photobucket. Make sure that you've marked your album "Public".

Step 3: In your Blogger Dashboard, go to Layout and add a gadget. Choose HTML/Java Script as the gadget type.

Step 4: In your PhotoBucket account, hover over the first icon you want to use and click on the HTML code link to copy it. Paste this into the Blogger gadget box. Repeat this procedure for the other buttons. They all go in the same box.

Step 5: Click "Rich Text" and you should see your buttons. Highlight the first button and use the third icon to create a link. Repeat until you've added all of your links.
    *Note: your email link is mailto:youremailaddress



 

Step 6: Save your widget and place it where you want it on your page. Preview your blog, then save the changes. You're done!

7 comments:

  1. nice widget, i ll place it in several my blogs :)

    ReplyDelete
  2. Thanks for the tutorial. When I past in the direct URL for the picture and then click Rich text in the widget box, I just see a code, not the picture. Any ideas? TIA,
    Heather
    Kickin' it in Kinder

    ReplyDelete
  3. Heather, thanks for bringing that to my attention. It's the HTML code that you use instead of the direct link. I fixed it in my post. Sorry about the confusion!
    Farrah

    ReplyDelete
  4. im having trouble getting the button to appear. i still see it as a link when i paste it. when i right click my photo in photobucket my only copy option is copy link. and that doesnt work..any tips?

    ReplyDelete
  5. Wow! I need to tell you that you are a life saver as far as helping me out with adding my own social buttons on my blogger account. I have been googling for days trying to figure this out and you made it pretty simple to figure out. I added my own social buttons, tweaked a bit and now it looks great. Thanks SO much!

    ReplyDelete
  6. It's me again. I just wanted to let you know that I added a link to this post on my own blog for others who are trying to figure out how to add custom social icons to their own Blogger site. http://lindahadalittlelamb.blogspot.ca/2013/01/adding-custom-social-buttons.html

    ReplyDelete
  7. I have been meaning to say THANK YOU for months after finding your very useful post! The joy of learning... it never ends!

    Kind regards,

    Callie
    http://callieandchef.blogspot.co.uk/

    ReplyDelete