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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ7KGGtGSu1kD78YrzzGbLO_Cs9zhkhTurTTe6DywHuOIzHTJNc9qhRXB0Y5kOWLVugnBnNehbxzTeTNOq4H1OH43Sh3y_iVAfUwnOKZGbRvTdsw2K6l41eK2q1vBUvweTsYAgObUZpzE/s1600/Rss-diyva.png" /></a>
<a href="Aqui URL twitter" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4J4rT7cx6IYcjHrTnc1u7DpTrjOfbUh0ndEK8a8g-zBfM_vtk8rxNa_YHvz964xR_Qupb5o8q7q_eAh1JuYLzTneUb8-Byr-8NMA0Jw2su0z-lfg-pCeiikjN1OQUAOOtHc3Gwg96_to/s1600/Twitter-diyvapng.png" /></a>
<a href="Aqui URL YouTube" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTxV7shCD5AMrAoNMBeI6hNMvpPmEjbFKLTnwlQNYccFeuutf9YjxbaGRKU2fRMFoi672VjCOpcy7269cS2QLAbWdlRsKjQGir-oSZVZDMnkmObCQ2jWllKzJb4J16jex1zUZtN_yHIKc/s1600/Youtube-diyva.png" /></a>
<a href="Aqui URL Facebook" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIXKTDAG5cnDgpOX73dlEQbBOUG2yslAItNAoChVPqLtDWZWdOlvzvFTn3YvLd2M-WbDAb7bUCMc-jpwWOvf3UatwBZdAocpSTBiqQhwEJtFCfwKkSYL6-uYauB76Lc74lmcZJAKAWuW0/s1600/Facebook-diyva.png" /></a>
<a href="Aqui URL Pinterest" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUt1VdZL5ptVkN_2q75hNA_ea313bw5SAyQ9q0XjtVJFXZQ6oFnjsB6yfrKJXx_d1GlE29_cAu2BSFSvKRPOBRH6ROUmBwzWlDD8Ze6TJBHLLb_X-TEZfdXW0ETUVjS56djHwJ-ZJyQLM/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.

0 opinaron:

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio