Iconos Sociales con Efecto de Agrandar en Css.

Iconos Sociales con Efecto de Agrandar en Css. Tutorial creado por Creando Blogs.

Estos íconos los he implementado en mi blog Marcos Gratis y me gusta mucho como queda, recomiendo alojar   las imágenes en tu propio servidor ya que a menudo hago cambio de plantilla y limpieza y puede ser que se borren las imágenes.

Aquí pueden probar los botones pinchando sobre cada uno, aunque el resultado final no es el óptimo debido a los estilos de mi plantilla para las imágenes de las entradas.

Bueno primero que nada, haz una copia de seguridad de la plantilla de tu blog. Luego agregamos lo siguiente  en añadir un gadget html/javascript.

<div class="social-connect-widget">
<a href="TU PAGINA DE GOOGLE+" target="_blank"><img alt="agrégame en google+" src="http://1.bp.blogspot.com/-NCMiSqVwgrg/TwWYbZBmM7I/AAAAAAAACGU/x5kaQIDb7hM/s1600/gplus-32.png" title="agrégame en google+" /></a>
<a href="http://twitter.com/TU NOMBRE DE TWITTER" target="_blank"><img alt="síguenos en twitter" src="http://3.bp.blogspot.com/-1NQnfW9_qD8/TnkjXj3f-qI/AAAAAAAAAPY/2MgSdlsVwN0/s000/social-connect-twitter.png" title="síguenos en twitter" /></a>
<a href="http://facebook.com/TU ID DE FACEBOOK" target="_blank"><img alt="estamos en facebook" src="http://3.bp.blogspot.com/-jtgnrR7QDLI/TnkjYOcfWVI/AAAAAAAAAPc/xRBFIzZYJ2I/s1600/social-connect-facebook.png" title="estamos en facebook" /></a>
<a href="http://feeds.feedburner.com/TU FEED" target="_blank"><img alt="feed rss" src="http://4.bp.blogspot.com/-BSXqhFPVRmY/TnkjXQAIbaI/AAAAAAAAAPU/63ZmAXMOa9U/s000/social-connect-rss.png" title="feed rss" /></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=TU ID" target="_blank"><img alt="suscríbete por e-mail" src="http://2.bp.blogspot.com/-kIIqoW-rCVo/Tyc72-a_-GI/AAAAAAAACYM/gw3n0TMTdfY/s1600/social-connect-mail.png" title="suscríbete por e-mail" /></a>
</div>
</div>

Debes llenar los datos que se encuentran con letras mayúsculas, tal como la dirección de tu página de Google + , etc. si no tienes puedes borrar esa parte y simplemente no se verá.

Luego iremos a plantilla, edición de html y ante de ]]></b:skin>, agregamos los siguientes estilos, los cuales dan el efcto de agrandar.

/* -- social connect widget -- */
.social-connect-widget img{
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-o-transform:scale(0.9);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
}
.social-connect-widget img:hover{
-webkit-transform:scale(1);
-moz-transform:scale(1);
-o-transform:scale(1);
-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
}
.social-connect-widget{text-align:right;margin:20px 20px ;}
.social-connect-widget img{vertical-align:middle} 

Si quisieras agrandar aún mas los íconos, prueba cambiando los valores en scale(1) a scale(1.2)  por ejemplo. Comprobamos en vista previa que todo luce bién y guardamos.

Si te gustó compártelo en tu red social o recomiéndalo en Google!!!

11 comentarios:

  1. Respuestas
    1. De nada Montse, gracias a ti. A ver si te animas a ponerlo. :)

      Eliminar
  2. HOLA AMIGA,QUE BUENA AYUDA,GRACIAS POR ESTAR ALLI,TE DEJO BECHITOS

    ResponderEliminar
    Respuestas
    1. Hola Sirena. Gracias por la visita amiga. Besos.

      Eliminar
  3. holaaaaa amiga,feliz mes de la amistad,la verdad que la Amistad tiene que ser siempre,gracias por ser mi amiga,y ayudarme en las metidas de patas en mi blog,jajaja,gracias por estar alli siempre,te dejo bechitos

    ResponderEliminar
    Respuestas
    1. Así es Reina, la amistad es siempre no solo un mes. Besos amiga. Nos vemos.

      Eliminar
  4. suuuper util! y mira que estuve buscando tutoriales pero ninguno tan sencillo como este!

    ResponderEliminar
  5. Alguien me puede ayudar sobre dónde debo colocar en la plantilla de edicion HTML el código para agrandar las imágenes? Blogger ah cambiado y no lo puedo encontrar

    ResponderEliminar
  6. Hola..

    Nunca sé lo que es hacer una copia de seguridad...cosa que leo por todos lados...

    Gracias por las ayudas

    ResponderEliminar

Tus comentarios ayudan a mejorar este Blog.