Mil Trucos Blogger

Iconos de Suscripción en redes Sociales con efecto Zoom

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

9 Comentarios

  1. marzo 23, 2014    

    Compartido en Twitter y puestos en mi blog ¡gracias!

  2. VICTOR VICTOR
    abril 24, 2014    

    Para colocar Youtube? Gracias!!

  3. junio 16, 2014    

    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?

  4. junio 16, 2014    

    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.

    • julio 20, 2014    

      Amigo que bueno que hayas solucionado el problema :-bd

      Saludos

  5. agosto 14, 2014    

    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.

  6. Miguel Miguel
    abril 13, 2015    

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

  7. Miguel Miguel
    abril 15, 2015    

    Hoy sorprendentemente funcionan todos.

Deja un comentario

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

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo