Social Media Buttons (& add Hover Effect)

Thursday, August 16, 2012

Social Media/Networking Buttons are a great way of getting peoples attention as well as saving space on your blog or website. You want them to look nice, stand out and fit your blog. This tutorial will go through how to instal them onto your blogspot blog and how to add a hover effect.

So, first step... Get your Buttons



A quick Google search "social networking buttons" will throw up loads of results. Such as this site with 55 different buttons or this site with standard buttons. You need to be careful of copyright when getting buttons this way.

You can also get buttons from my design shop (by clicking store above) or check out the freebies available on this blog.

Upload Buttons


You need to upload the buttons to a hosting site, such as Tinypic. This will give you the image link to then use in your html code.


In Blogger


Click design, page elements & Add a gadget. Scroll down until you see "HTML/Javascript". *



NOTE: If you have the updated blogger, this may look different. 
Click Layout > Add A Gadget >HTML/Javascript



HTML Code


<a href="Insert website/profile link here" target="blank" title="Description of link/website"> <img src="Direct URL of image" border="0" /> </a>  


*4b. If you want the image to change to another image when you hover/roll over it like I have, use the following code;


<a href="Insert website/profile link here" target="blank" title="Description of link/website">
<img src="Direct URL of image" border="0" onmouseover="this.src='Image url link of image used when hover'" onmouseout="this.src='Image url link of what you want it to return to'" /> </a>  




Using Tinypic


The URL image link is the "Direct link for layouts", it should look something like this, depending on what hosting site you are using.


Eg. So altogether mine looks like; 


<a href="http://twitter.com/misseblog" target="blank" title="Follow tweets by Misse">

<img src="Image url link of what you can see" border="0" onmouseover="this.src='Image url link of image used when hover'" onmouseout="this.src='Image url link of what you want it to return to'" /></a> 
which gives me this;


  


Simply Save & Test



All beside each other?

If you write the code for each link one after another, blogger should automatically place them beside each other, until you run out of column space. Then it will go to the line below.


How to Center them?

If you want to place them in the center, just add <center> before the code and </center> after. Example:

<center>

<a href="Insert link here" target="blank" title="Description of link">
<img src="URL of image" border="0" /> </a>  
</center>


Hope this helped, any questions, please let me know! Take your time with it and carefully copy&paste the urls xox


Check out how to link images/pictures to pages/websites.