Tutorial: Custom Social Media Buttons in Blogger


I don't know about you bloggers, but I've always been super jealous of other people's custom social media buttons. I finally found a great tutorial here and made some for myself!

Here is what I did to make the ones you see on the bar to the left:

1. Start by uploading a blank image into PicMonkey. I chose to insert three shapes from the arrows section and made them different colors to match my blog. You can get much more creative though. There are a lot of options available on this site!


2. Add font to your pictures. 


Or if you want the actual social media logos, you can visit this site. Right click the logo and save it to your computer. Just upload those images on top of the patterns you have in PicMonkey and you'll be able to re-color from there. 

3. Once you have created your picture, save the image to your computer. 

4. Now you're off to Photobucket to create a URL for your picture. Upload your picture off of your computer.  Stop when you get to this point. Now move on to the next step and we'll revisit this website in a second... 



5. {This is a great discovery!} Image Maps will allow you to create individual links for each "button", even though they are all built into one image!

{The following instructions are for creating a link in Blogger. I don't know if this will work the same for other websites!}

6. Start by uploading the picture off of your computer. I used the "Rectangle" button to build the three buttons. 

7. Once you have them all linked up, move over to the settings on the right sidebar.
- "Base URL": This is where Photobucket comes in. Go back to your Photobucket site and            copy the "Direct Link". Replace where it says "http://www.image-maps.com/" and click update.
- I turned off "Show Text Links" and "Allow Backlink", but that's up to you.
- Scroll back up and push "Get Your Code"

8. Copy the code from the HTML Code tab at the top.

9. Now go into your Blogger dashboard and click on: Layout --> Add a Gadget --> HTML/Java Script --> Paste the HTML Code into the box {I didn't include a title} --> Save

10. This should have inserted your picture with individual links in the sidebar of your blog. From there, you can arrange the widgets like normal on your dashboard so it shows up in the correct place on your site.

After visiting {at least} 5 sites, you've finally created a custom social media button! Make sure you save this guide for the next time you get the urge to re-do your blog!

I think I have all the details down, but post a comment if you have any questions/issues and I'll answer them for you!

xo.xo.



6 comments:

  1. Thank you so much for sharing this! I've been wanting to know how to do it!

    ReplyDelete
  2. I'm in the process of revamping my blog ... This will be of such help :) Thank you!

    ReplyDelete
  3. I love this but for some reason after I add the code on my blog it won't show up. :(

    ReplyDelete
  4. Thank you so much for sharing this ! I really need it!
    New Follower :) Rebecca
    www.heronscrafts.blogspot.com

    ReplyDelete
  5. it worked the first time but now the code keeps showing a blank photobucket image (like it's been removed). any idea why??

    ReplyDelete

Thank you for stopping by, I love hearing your comments! xo.xo. Hilary