Efecto zoom en botones de redes sociales al pasar el mouse ~ Tube trucos

Hace unos días atrás visitando el foro de google me encontré con que no una varias personas preguntaban como podían obtener el efecto zoom,ampliar en botones de redes sociales y revisando en el baúl de los truquitos jajaja encontré algo que me podía ayudar componer este efecto Hover el cual al pasar el mouse por encima de esa imagen que en este caso va a ser unos botones de redes sociales este obtiene el efecto zoom o sea se amplia,se agranda y al quitar el puntero,mouse esta vuelve a su normalidad, con este efecto podemos hasta observar mejor dicho botón.
Para implementar este efecto es bien sencillo solo colocandolo en un gadget , lo que son los estilos los cuales estan entre las etiquetas <style> y <style> lo pueden colocar en su plantilla antes de que cierre la etiqueta </head> pero si quieren lo pueden dejar todo junto y colocarlos donde les voy a indicar para eso. Vamos a diseño >>> Añadir un gadget >>>HTML/Javascript Añadir >>> y una ves abierta la ventana pegamos el siguiente codigo:

Le vamos a dar una clase en este caso va a ser redes-sociales1 ustedes la pueden cambiar si quieren o si en su sitio ya tienen ese id pues lo cambian porque no se puede repetir.

Ejemplo:

<style type='text/css'>
.redes-sociales1{
list-style-type:none;
margin:0;
padding:0;
}

.redes-sociales1 li{
display:inline;
width: 45px;
height:50px;
}

.redes-sociales1 li img{
width: 45px; /* tamaño de la imagen.*/
height: 50px; /* altura de la imagen.*/
border:0;
margin-right: 12px; /*espacio entre cada imagen*/
-webkit-transition:-webkit-transform 0.1s ease-in;
-o-transition:-o-transform 0.1s ease-in;
transition:transform 0.1s ease-in;
-khtml-transform 0.1s ease-in;
}

.redes-sociales1 li img:hover{
-moz-transform:scale(1.8); /*tamaño que va a alcansar la imagen mas es mas grande en firefox */
-webkit-transform:scale(1.8); /*Y así para los demas navegadores excepto IE*/
-o-transform:scale(1.8);
transform:scale(1.8);
-khtml-transform:scale(1.8);
}

</style>

<ul class="redes-sociales1">
<li><a href="http://tubetrucos.com"><img src="http://dl.dropbox.com/u/25944020/twitter.png" title="añadir a twitter" /></a></li>
<li><a href="http://tubetrucos.com"><img src="http://dl.dropbox.com/u/25944020/facebook.png" title="añadir a Facebook" /></a></li>
<li><a href="http://tubetrucos.com"><img src="http://dl.dropbox.com/u/25944020/google%2B.png" title="añadir a google+" /></a></li>
<li><a href="http://tubetrucos.com"><img src="http://dl.dropbox.com/u/25944020/rss%20%282%29.png" title="añadir a RSS Feed" /></a></li>
<li><a href="http://tubetrucos.com"><img src="http://dl.dropbox.com/u/25944020/you-tube.png" title="añadir a youtube" /></a></li>
</ul>

Nota:
Lo que que esta en color rojo deben sustituirlo por la url que tienen en la red social de la red social.
Lo que esta en color naranja es la url de la imagen esa la pueden sustituir por otra que sea de su agrado.
Lo que esta en color amarillo es el titulo que quieren que aparesca al poner el mouse encima de la imagen.

Una ves puesto el codigo y echo los cambios correspondientes le dan al boton de guardar y van a ver como les quedo.

Sí les gusto este post,entrada recuerden compartir y comentar no cuesta nada es un modo de agradecer por el trabajo y esfuerzo que uno hace si pueden y creen que esta información les es útil denle click a los botoncitos en los que quieran compartir de facebook,twitter,google+ y bitacoras y así otros que también necesitan el código o la información lo podrán ver muchas gracias