Marcadores sociales con efecto zoom

En post anteriores habíamos visto cómo agregar íconos de redes sociales con dos efectos muy vistosos: el efecto pushbutton y el efecto de opacidad.

Hoy veremos otro efecto que podemos agregarle a nuestros marcadores para darles un toque especial: el efecto zoom.
Marcadores sociales con efecto zoom
DEMO
(Pasar el cursor sobre los íconos)

Para agregar este efecto seguimos los siguientes pasos:

1.§ Vamos a Plantilla - Editar HTML.

2.§ Con ayuda de CRTL+F buscamos <b:skin>.Si está cerrado, damos clic en la flechita negra del lado izquierdo para desplegar el código. Debajo de <b:skin><![CDATA[/* pegaremos los siguientes estilos:
/* Tamaño de los íconos sin pasar el mouse y tiempo de transición */
.zoombutton img{
margin: 5px 3px 3px 2px;
text-align: center;
-webkit-transform:scale(0.9);
-moz-transform:scale(0.9);
-o-transform:scale(0.9);
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
-o-transition-duration: 0.4s;
}

/* Tamaño de los íconos al pasar el mouse */
.zoombutton img:hover{
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
}
3.§ Damos clic en Guardar plantilla.

4.§ Ahora elegimos el lugar donde los colocaremos. Si es en el footer de las entradas, lo colocamos en la plantilla, encima de <p class='post-footer-line post-footer-line-3'/>

Si los colocamos en la sidebar, vamos a Diseño - Añadir un gadget - HTML/Javascript .

5.§ Pegaremos el siguiente código HTML. Podemos sustituir los íconos por nuestros íconos favoritos y/o agregar más redes sociales.
<span class="zoombutton">
<a href="Aqui URL feed" target="_blank"><img src="http://2.bp.blogspot.com/-fQYjW4gGTIQ/U8RVi7b-gJI/AAAAAAAACBE/fGP0ATi2OHg/s1600/Rss-diyva.png" /></a>
<a href="Aqui URL twitter" target="_blank"><img src="http://2.bp.blogspot.com/-iAH8FsMtVCk/U8RVrr7CsYI/AAAAAAAACBQ/iGLizY3Tpek/s1600/Twitter-diyvapng.png" /></a>
<a href="Aqui URL YouTube" target="_blank"><img src="http://2.bp.blogspot.com/-VhSq7QxB6dw/U8RV2e4t01I/AAAAAAAACBY/VF1SnbM4KhA/s1600/Youtube-diyva.png" /></a>
<a href="Aqui URL Facebook" target="_blank"><img src="http://2.bp.blogspot.com/-l8uzNOzVdIg/U8RVIp4fw_I/AAAAAAAACA4/4vMym8X36Dk/s1600/Facebook-diyva.png" /></a>
<a href="Aqui URL Pinterest" target="_blank"><img src="http://4.bp.blogspot.com/-FyXzh2ZZOlg/U8RVcYC16pI/AAAAAAAACA8/-7UpxAuZjHk/s1600/Pinterest-diyva.png" /></a>
</span>
6.§ Damos clic a Guardar y listo.

Si te gustó el post, compártelo con tus amigos. No olvides seguirme en mis redes sociales. Y si tienes alguna duda sobre el post, déjame tu comentario en esta entrada.

Cómo pintar líneas rectas con la herramienta Pincel en Photoshop

Éste es un tutorial pequeñísimo y muy sencillo, pero que puede ser de ayuda, sobretodo puede ahorrarnos tiempo al momento de estar elaborando nuestro diseño.

Tutorial Photoshop pintar lineas rectas

1.§ Para pintar en trazos rectos, primero debemos tener seleccionada la herramienta Pincel, ya habiendo definido un tamaño, dureza, etc.

2.§ Luego, mientras vamos pintando, mantenemos presionada la tecla Shift. Con ello conseguiremos trazos o líneas rectas, ya sean verticales u horizontales.

Pintar lineas rectas en Photoshop

Y si quieres pinceles, en el blog y en el canal de Youtube encontrarás algunos packs que pueden servirte.

inicio