Marcadores sociales con efecto opacidad y giro


En post anteriores habíamos visto cómo agregar íconos de redes sociales con los siguientes efectos: el efecto pushbutton, el efecto de opacidad y el efecto zoom.

Hoy combinaremos dos efectos: el efecto opacidad (que vimos anteriormente) y el efecto de rotación o giro.
Marcadores sociales con efecto giro y opacidad
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:
/* Opacidad inicial de los íconos */
.rotatebutton img{
opacity: 0.6;
}

/* Tiempo de transición y grado de rotación */
.rotatebutton img:hover{
opacity: 1;
transition: 0.9s ;
transform: rotate(360deg);
}
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="rotatebutton">
<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. Sígueme en mis redes sociales para más novedades. Y si tienes alguna duda sobre el post, déjame tu comentario en esta entrada.

1 opinaron:

lucy@gradecidadeDios

no lo pude hacer me sale eror

Responder

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