Iconos de Suscripción en redes Sociales con efecto Zoom

En esta ocasión he creado un espectacular truco para tu blog, con el cual agregaras un pack de iconos de suscripción con efecto Zoom al pasar el cursor sobre ellos, el efecto zoom en los iconos es logrado gracias a CSS, mas exactamente por la propiedad hovergallery.

Los iconos sociales se ven de la siguiente manera:

Para agregar este truco a tu blog ve a Diseño, Añadir Gadget, HTML/JavaScript y pega lo siguiente:
<div class="separator" style="clear: both; text-align: center;">
<a class="hovergallery" href="URL de tu cuenta de Google Plus" target="_blank">
<img src="http://4.bp.blogspot.com/-J6FGCxIRNxs/Uy8F_DZ3N9I/AAAAAAAAD0M/lD7cMz_fq_4/s1600/googleplus-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Facebook" target="_blank">
<img src="http://3.bp.blogspot.com/-eyCg8VyhqQI/Uy8F9r60xCI/AAAAAAAAD0E/sQ82sCRQc3Y/s1600/facebook-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Pinterest" target="_blank">
<img src="http://1.bp.blogspot.com/-xD2NvtM-cQ4/Uy8GBUTOXbI/AAAAAAAAD0U/dkh4Io8w3lA/s1600/pinterest-64.png" /></a>
<a class="hovergallery" href="URL de tu cuenta de Twitter" target="_blank">
<img src="http://2.bp.blogspot.com/-JtCjmiY5Jl8/Uy8GGiqq9sI/AAAAAAAAD0k/WIXtHNHxOw0/s1600/twitter-64.png" /></a> <a class="hovergallery" href="URL de tu RSS" target="_blank">
<img src="http://1.bp.blogspot.com/-f5sHdCUrFdw/Uy8GDIkqF1I/AAAAAAAAD0c/_-XucshKxIY/s1600/rss-64.png" /></a></div>
<style type="text/css">
.hovergallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 1px 5px 0;
}
.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
</style>

Ahora reemplaza lo que esta resaltado en color azul por lo que se indica en cada caso y guarda los cambios.

Esperamos que te haya gustado este espectacular truco para tu blog y si quieres encontrar los mejores recursos no dudes en volver a visitar Mil Trucos Blogger

0
Shares

9 thoughts on “Iconos de Suscripción en redes Sociales con efecto Zoom

  • junio 16, 2014 en 2:36 pm
    Permalink

    Tengo un problema. Resulta que sustituí las imágenes prefijadas por otras que hice yo, pero a la hora de permanecer estáticas se cortan por abajo y la derecha (son también redondas). El resto de movimientos los hacen perfectos.
    ¿Alguien sabe porqué ocurre eso?

    Responder
  • junio 16, 2014 en 3:03 pm
    Permalink

    Ya lo he solucionado. Lo digo por si acaso le ocurre lo mismo a otro: basta con añadir unos pocos píxeles de margen transparente a la imagen (en mi caso, 3).

    Muchas gracias por la plantilla, va a las mil maravillas.

    Responder
  • agosto 14, 2014 en 3:42 pm
    Permalink

    Me encantan tus trucos!! Me van a resultar muy útiles para mi blog. Me gustaría poner estos símbolos pero únicamente facebook, twitter, google plus e instagram. ¿que debo hacer con el código? Mil gracias. Saludos.

    Responder
  • abril 13, 2015 en 10:08 am
    Permalink

    No me aparecen las imagenes de los iconos sociales, ¿Sigue funcionando?

    Responder
  • abril 15, 2015 en 9:36 am
    Permalink

    Hoy sorprendentemente funcionan todos.

    Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *