Mil Trucos Blogger

Iconos sociales navideños con efecto zoom

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

Como estamos en época navideña he decidido hacer una serie de entradas con trucos navideños para que puedas decorar tu blog acorde a esta época, y en el día de hoy voy a compartir unos hermosos iconos sociales navideños con efecto de zoom.

El efecto zoom en los iconos es logrado gracias a CSS, mas exactamente por la propiedad hovergallery.

Los iconos 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/-kZ9OGOh7sT0/UrC4irF9TjI/AAAAAAAADgY/s89EdpFm8LY/s1600/g+-ball-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Facebook" target="_blank">
<img src="http://3.bp.blogspot.com/-BvRp6Vk69Jk/UrC4eahW_LI/AAAAAAAADgQ/_FT4QU4sX_w/s1600/fb-ball-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Linkedin" target="_blank">
<img src="http://3.bp.blogspot.com/-bOk0ZfRWd0s/UrC5BG8D_lI/AAAAAAAADgg/l56sHlfrETg/s1600/linkedin-ball-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Pinterest" target="_blank">
<img src="http://2.bp.blogspot.com/-kI5kCOttMaY/UrC5MzVjnpI/AAAAAAAADgo/iIDZm8O-VJg/s1600/pinter-ball-64.png" /></a>
<a class="hovergallery" href="URL de tu cuenta de Twitter" target="_blank">
<img src="http://1.bp.blogspot.com/-LMpQidTb2SE/UrC5RK4xZhI/AAAAAAAADgw/ooTI665NE68/s1600/twitter-ball-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Youtube" target="_blank">
<img src="http://1.bp.blogspot.com/-snUikwURUAw/UrC5op2F57I/AAAAAAAADg4/2tSqo98vrYw/s1600/youtube-ball-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 que nos sigas visitando.

0
Shares

Relacionados...

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

! Comentario

  1. diciembre 19, 2013    

    se ve bonito el gadget voy a ver si lo integro en mi blog

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