{Revamp Your Blog} Custom Social Media Buttons

If you are new here- welcome! If you are returning you may have noticed that things are a little different around here. I gave the blog a facelift and redesigned the look of things. Today I am starting a new blog series called- Revamp your blog. I will be giving tips and trips to make your blog better than it's ever been- and for free! To start things off I will show you how to make custom social media buttons- like the ones that I made.

All you are going to need is your computer and any photo editing software- I used Photoshop for this tutorial

To start things off open Photoshop and select under the file menu- new. Under preset open the drop down box and find photo. Chose the 4x6 photo selection and press OK.

Once you have a new blank white photo decide what you want your button to look like- I will be making a water color button in this tutorial. Start by downloading watercolor brushes for Photoshop they can be found here. When you download your brushes open Photoshop and select the brush tool- click on the triangle that inside the circle and choose- load brushes and then just choose the water color brush file and you can now use then to make your media buttons!

Choose a watercolor brush that you like and then change the color to want is desired. Try and create a circle shape by alternating different brushes and different colors to get how you want it to look like.

I went online and search for social media icons and found one I liked here and in Photoshop I cropped out every icon except the one I was making (facebook) then using the magic wand tool I selected the "f" and then selected the select inverse option and deleted it. I ten just moved it over the water color spot and made it bigger using the free transform option under edit. Save.*** Must save as a PNG file! Very Important ***

Then I repeated that step for all of the other social media icons (all on a new photo sheet).  

Now you are going to want to upload all of the photos you saved up to a picture viewing site. I use Photobucket and totally recommend it because it really easy to navigate through.

  

If you want to you can crop some of the excess white that shows up on the buttons- it doesn't make a difference.

Now comes the important stuff!

In blogger go to the layout tab of your blog and in the side bar click on add a gadget. Scroll down until you find the HTML/Javascript selection. You can add a title if you want or just leave it blank. In the body of the text you want to use the following codes- 

For Email-

<center><a href="mailto:YOUR EMAIL ADDRESS"><img src="THE DIRECT URL OF YOUR UPLOADED BUTTON" height="50" width="50" alt="Email Me" /></a>

The direct URL of the button is located in Photobucket 

If you just right click in that rectangle it will copy it automatically. Then just paste it where the direct URL goes.

For Every Other Button-

<a title="Follow Me On Facebook" href="URL TO FACEBOOK PAGE"><img alt="Follow Me On Facebook" src="THE DIRECT URL OF YOUR UPLOADED BUTTON" height="50" width="50" border="0" /></a>

Use this formula for every other media button like facebook, twitter, instagram, etc. Get the URL the same way as above. **Where it says "Follow Me On Facebook" twice in the formula switch it out with the name of the program- "Follow Me On Twitter" "Follow Me On Instagram" whenever you make those button codes.

Also you can change the size of the buttons! Whether you want them to be really large or really small you can change it by typing in the size that you ant it to be here.

 height="50" width="50" border="0" /></a>

***For circle icons you want to make sure that the numbers are the same for both height and width so that it does not throw off the look of the number. Depending on the way you want it to look, you may want to play around with sizes. 

For my social media buttons- I used 60 for the height but 300 for the width because mine are rectangle shape. (flag) Like I said just play around to see what you like.

Also if you want the buttons to be centered you can put <center> at the beginning of the code and </center> at the end like this-

<center><a title="Follow Me On Facebook" href="URL TO FACEBOOK PAGE"><img alt="Follow Me On Facebook" src="THE DIRECT URL OF YOUR UPLOADED BUTTON" height="50" width="50" border="0" /></a></center>

If you don't have the time to make custom one you can download all of the different buttons that I make on this post (As I make more I will update the post!)

Pink Water Colors

bloglovin' || Email || tumblr || pinterest || twitter || Etsy || instagram|| Google+|| You Tube || facebook



Steel Grey Flags

tumblr || twitter || email || bloglovin' || pinterest || instagram || youtube || facebook || google+ || etsy




Black Circles

bloglovin' || etsy || facebook || google+ || instagram || email || pinterest || tumblr || twitter || youtube



Arrows

To Change Button Color

If you want a custom color for any of the buttons above just download what shape you want to your computer and open picmonkey. Select edit a photo and upload a blank white photo- no color (unless you want the color of the icons to change). Then select overlays and click your own. Open the downloaded button and move the color sliders until you have the color of your choice- then just save the file and do the same for the rest of the icons you need.

                                                                                                                                                        

Well that's all that I have. Hopefully you found this tutorial helpful to revamp your blog! Feel Free to use the ones I have already made! Also if you don't have time to create your own but would really like custom ones just email me and tell me want you want and I can see what I can do! If you have any questions don't hesitate to comment or email.