Friday, 9 November 2012

Social Media Button Tutorial

Wow my first tutorial, I'm keen to make it as concise as it needs to be but simple so here goes. I will be showing you how I made my social media buttons.

 I have not been blogging for long, but one thing I was very keen find out how to do from day one was personalised buttons. I was very envious of a lot of the blogs I was reading (and still am). It took a lot of searching on Google but I came across the method I want to share with you now. I found a lot of what I like to call plastic buttons which you just had to download but nothing seemed to have the right feel for my personal blog. The style of design I'm now using is used widely by a lot of bloggers as its easy to design them to suit the feel of the blog.

Firstly, open pic monkey and upload any picture from your computer.

Now use the crop tool to set the size of your button, here we have gone for 50x50, it does not matter where you crop in the picture you uploaded.

Now that you have been left with the 50x50 square we need to decide on a colour. To do this select a square from geometric shape then enlarge it to cover your square . Then to make it the colour you want, you can just choose from the palette or I copied and pasted the colour code from my blogs template. This can be found in the template option on the blogger dashboard and in the template design page the code is found under customise, advance.

Now its time to add the design style bit, you can choose any which take your fancy. However, I went for the jagged edged circle in labels. Enlarge it to the size you want and choose a colour again I copied and pasted another code from my template design. When you are happy with the position and colour hit the merge button at the top of the screen. This stops it from moving around. Once you have created your cute little button hit save so you have the base image for all the buttons you want to create.

Now we can add the social media icon lucky for you I have added the icons I used for my buttons at the bottom of this post. They are silhouette images feel free to save the images to your computer ready for use.
Open the icon by clicking Your Own in the overlay page. Enlarge the image to suit, position accordingly and add the desired colour. Once done hit the merge button again and save your masterpiece.

 Repeat these steps to create all your desired social media link buttons.

When you have created all the images you need to upload them to a image hosting website for example photobucket is a good one. Then you get to the bit that scares the hell out of me the code to make them work. I opened a Word document and added the code below ready to change it to suit.

This is a simple code which i used, copy and paste this to Word.

<a href=”YOUR SOCIAL URL HERE target=”_blank”><img src=”YOUR IMAGE DIRECT LINK HERE“ alt=”YOUR IMAGE TITLE HERE“50px" border="0"/></a>

Your social URL is the address of the desired location i.e your facebook page
Your image direct link can be found on photobucket see below.
Your image title is what you want to call it for example 'Like me on Facebook'

When you have created your code, open the blogger dashboard, click layout, then add gadget, choose html/java script from the list. Then simply copy and paste the code in to the box.

 Here is example of what my coding looked like

<a href="" target="_blank"><img src="" alt=" Like me on Facebook"width="50px" border="0"/></a>

That's it for my first tutorial i hoped that you have found it useful. I actively want your feed back please inform me if you anything you think I need to add.