Social Media Buttons (& add Hover Effect)

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.