This was a Dragon Hussy tutorial suggestion (hehe) Shona asked "How do you make social media buttons." If you are savvy with an image manipulation program, feel free to make an awesome button of your own. There are also FREE social media icons that you can use. All you have to do is Google search it and a ton of websites will show up. Just beware of the site you download from, no one wants a virus. You can also try your luck on Etsy. They have social media button sets as low as $3. Nothing like style on the cheap!! If you use the freebies or the ones from Etsy, follow the directions that are further down the post.

As always, if you need any assistance whatsoever HOLLLLAAAA!! Be sure to send my your blog link if you use a tutorial so I can see the awesome stuff you did!!

I am going to show you a basic one that I created. You are welcome to use these images for your own blog, I just ask that you give me credit for them. I only used the 3 as an example for one of the tutorials but I will make buttons for each social media site. All of the images(including other buttons) will be at the bottom of this post as well as the codes to use them.

Step one: Make a Template

Since not every has Photoshop, I'm going to do this tutorial on Pixlr. It's free and easier to use than GIMP for easy stuff like this.

http://pixlr.com/editor/

You're going to click File... New Image...and create your button the size that you want it in pixels. You can always change the size after you create the image.

Check your sidebar settings on your blog to see what size you need. If your sidebar is set to 250px, go for a button that's 230px wide. Height can vary depending on what you want.

My template that is shown is 250 x 50 px. Click on the image if you want to see the full size to better see what I'm doing.

Click on the Gradient Tool in the tools section on the left. It's the little blue gradient box below the eraser.

You can change the color of the gradient on the top toolbar by clicking where mine is shown pink.

Once you have your color set, click and drag from the edge of the image to the opposite side. You can get creative with it if you choose. Do a diagonal, whatever. :) I chose a straight across gradient.

Go ahead and save this image to your computer by going to file save. You can save this one as a jpg at full resolution.The next few steps will vary on how you want to set up your buttons. You can either A.) Make each button separately, save them and upload them to a new gadget it Blogger (widget for WP) and have it link to your social media link. B.) Make each button separately, save them and code them all into one HTML gadget. Or 3.) Make one large image with each button and use an image map (this is the best but may confuse the shit out of you. But never fear! I have a foolproof way of doing it and you will love it)

Pixlr is very limited on the fonts that you can use (which is why you can use GIMP or Photoshop to add fancy fonts to your buttons)

Go ahead and click on the A to add font. You can choose any of the fonts they have. When you are finished typing out your social media name, go to file save and save it to your computer (make sure you change the file name. better to be safe than sorry) If you are familiar with image manipulation programs, you can gooogle the icons for each social media site and use those.

After it is saved, click on the name and change it to your next social media name. If it's not centered, click on the Move tool which is the top right one on your Tool box. Go ahead and move the text to where you want it. You will do these steps for each image you want to create.

Option #1: Use an image gadget

If you use blogger, there is a gadget to add an image. I'm sure you all know how to use this by now, but it gives you the option to link the image to a URL. You just upload the image and put in your URL. That simple. You need to do this with every image (which is why I do not recommend this way if you are using multiple buttons)

Option # 2: Code your buttons!

This is the most simple thing to do ever!

First you will need to upload your image to an image hosting site (or blogger) to get the image code. I like to use http://tinypic.com/ or Photobucket You upload the image and once it is finished, you'll use the code and the bottom for direct link for layouts.

You will code it EXACTLY like this and ONLY replace the text that is written in red

<center><a href="YOUR TWITTER URL HERE"/><img src="http://tinypic.com/r/2uzz6z7/5"/></a></center>

This is the code for your Twitter Button

Repeat the same with the next two buttons

<center><a href="YOUR FACEBOOK URL HERE"/><img src="http://i43.tinypic.com/2lj6hd4.jpg"/></a></center>

And your Goodreads

<center><a href="YOUR GOODREADS URL HERE"/><img src="http://i40.tinypic.com/10endwm.jpg"/></a></center>

When pasting this code into an HTML/Javascript gadget, you will post it exactly like this :

<center><a href="YOUR TWITTER URL HERE"/><img src="http://tinypic.com/r/2uzz6z7/5"/></a></center>

<center><a href="YOUR FACEBOOK URL HERE"/><img src="http://i43.tinypic.com/2lj6hd4.jpg"/></a></center>

<center><a href="YOUR GOODREADS URL HERE"/><img src="http://i40.tinypic.com/10endwm.jpg"/></a></center>

This will mean they are all in one widget. Easy as pie!!

Option # 3: Image Map

My favorite option!

Open all of the images that you made for each social media name.

Create a New Image that will be 250 px wide and 161 px in height. Make sure you set the background to Transparent. There is a little box to click when you create the image. After you have that set, click on the image you want to have at the top, ctrl + A to highlight the image and crtl + C to copy. Go to your blank canvas and hit ctrl + V. Your image will be pasted onto a new layer. Use the Move tool which is the top right one on your Tool box, to move the image up or down to the desired position. Repeat this with all of the images.

Once you finish setting up your complete button, go to File then Save. Under Format, click the drop down listand change it to a PNG file. This will save it with a transparent background.

Now for the fun part!

To map an image the easy way you can use http://www.image-maps.com/. First you will need to upload your image to an image hosting site (or blogger) to get the image code. I like to use http://tinypic.com/ or Photobucket You upload the image and once it is finished, you'll use the code and the bottom for direct link for layouts.

Go ahead and put that URL into the box on image maps and click "start mapping your image." You'll have to wait a minute for that to load and then click "continue to next step"

Make sure you don't reset the browser...you'll lose your progress!!

Click on rectangle shape and manipulate the box so it covers your FIRST button. Add the URL for your first button (Facebook) and a title in the bottom box, which you would title it Facebook. Then click save. Repeat these steps for each button.

After you have linked all of your buttons, click "Get your code" then click "HTML Code"

Once you click there, highlight ONLY the code that I have boxed in the pic below. (Ignore the warning in orange because the image URL you used is where it is hosted)

Use this code in a new sidebar HTML/JavaScript widget on Blogger or Wordpress. Once you click save you'll have a shiny new mapped image. All of the buttons will be clickable.

Here is the image map for the picture above (Facebook, Twitter, GR buttons) You are welcome to use this on your blog I just ask that you give me credit for the button. The font in red is what you need to replace with your own links.

<img id="Image-Maps_2201312041529254" src="http://i41.tinypic.com/2me7qtf.png" usemap="#Image-Maps_2201312041529254" border="0" width="250" height="161" alt="" />
<map id="_Image-Maps_2201312041529254" name="Image-Maps_2201312041529254">
<area shape="rect" coords="0,106,245,156" href="YOUR LINK HERE " alt="goodreads" title="goodreads"    />
<area shape="rect" coords="0,52,245,102" href="YOUR LINK HERE" alt="Twitter" title="Twitter"    />
<area shape="rect" coords="0,1,245,51" href="YOUR LINK HERE" alt="Facebook" title="Facebook"    />
<area shape="rect" coords="248,159,250,161" href="http://www.image-maps.com/index.php?aff=mapped_users_2201312041529254" alt="Image Map" title="Image Map" />
</map>