How to Customize Social Media Follow Buttons for Blogger

September 02, 2014

Do you ever see those cute social media follow buttons on the sidebar of your favorite blog? Do you want to know how to customize those yourself? 
I cannot say it's exactly the easiest thing to do, but it can be lots of fun!

You can go onto Pinterest and look up all kinds of free social media icons . Pick something that you like and that says you can use for your own personal use. 

Download them. Sometimes you can just click them and do "save image as". 

These are the one that I am going to use for my example. 

Get them Here

Ok, so now you found something you like, but it does not match your color scheme...we can fix that. 

Go into and open the image that you saved. In Pixlr you will crop it as close as you can to the one that you want to edit. Once you get it were you want it, click off that photo and hit yes.

Now go back to FILE and click NEW image. Then select ratios that will be what you will need. This one was 164x 44 transparent. Always select transparent!! This will be what you will have-

You will then need to do the following steps.

1-click on the the "freebiepreview11" 
2- click on EDIT- select all
3- click on EDIT again- copy
4- click on the new photo box called untitled
5- Go back to edit- click paste
6-Now sometimes it will not fit; too big or too small- so click on EDIT- free transform (position it however you like. Then click off the photo to set it, hit yes if you like it.

Now you are ready to edit this photo. It will continue to be TWITTER, we are only going to edit the color. 

The first step to editing your photo is to get rid of all that white space around your photo. If you background is blue, you will see that white box around it...not good!
You want to have just the ribbon showing. 

To do this, select the magic wand button

Now go to your new photo and click that wand on your white background. This is what it will look like once you have done this. 

Now press your delete button. That white space will disappear. The next thing you HAVE to do is click your wand on the gray area- this is to disable the wand.

Now go over to paint bucket fill icon, then down to the color boxes to select your color. 

After you have your color. Fill on your ribbon. You may end up with something like this-

You will have to take your bucket and fill in those areas. You can also enlarge the image- see in the corner were it says 100% you can make it as big as you need to actually see were you need to fill in.

This is my end result after playing around with the paint brush and enlarging the photo to 400%

Once you get it how you like it- click the FILE button and save a PNG!! This will keep it looking just like this with no white background!!

Now that you know how to do this, the possibilities are endless!!

FYI- not all photos can be edited this easy. Some take lots of work and editing to get the colors just right. But you can have loads of fun trying them out!!

Also make sure that you have an image that the blogger says is free for your own personal use. This ensure you will not get into any trouble editing and using the photo on your blog!!

My next post will be how to add these to your sidebar!!


You Might Also Like


  1. This is a great post. Thank you for linking it up to Dare to Share, you are a Dare to Share Feature of the Day.

  2. wow as a total complete html idiot, I think I could follow these instructions! Thanks for the tute!

  3. Great tips! Thanks for sharing!

  4. Thanks for this, I need cuter buttons on my blog! Pinning. :)

  5. I have been wondering how to do this! thank you! I'm glad I found this at Turn it Up Tuesday #52!

  6. So helpful, thanks for all the tips. Stopping by from Let's Be Friends Hop this week. Hope you have a great week :)


4 Steps To A Better Life For Yourself As A Busy Mom

  While being a mom is a rewarding role it’s also a tough job most days. You may have a hectic career as well as many responsibilities to at...