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.

↪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="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. 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.