Bueno primeramente darle Gracias a Hayder Juvinao por darme la oportunidad de ser parte de Mil Trucos Blogger y poder compartir con ustedes todo lo que he aprendido en Blogger.
Existen diferentes tipos de Iconos que giran, pero ninguno tan impresionante que estos, que no solamente giran sino que a la vez cambian de color al pasar el cursor. Puedes ver los gadgets en funcionamiento en
este blog de pruebas el gadget está situado en la barra lateral del blog.
Para añadir este gadget en tu blog ve a
Diseño, Añadir gadget, HTML/JavaScript y pega allí lo siguiente:
<style type="text/css">
.MilTrucosBlogger-Social img{
border-radius: 50%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.Facebook-Social{
-webkit-filter: grayscale(100%);
}
.Facebook-Social:hover{
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.Twitter-Social{
-webkit-filter: grayscale(100%);
}
.Twitter-Social:hover{
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.GooglePlus-Social{
-webkit-filter: grayscale(100%);
}
.GooglePlus-Social:hover{
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.YouTube-Social{
-webkit-filter: grayscale(100%);
}
.YouTube-Social:hover{
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
.RSS-Social{
-webkit-filter: grayscale(100%);
}
.RSS-Social:hover{
-webkit-filter: grayscale(0%);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
</style>
<div class="MilTrucosBlogger-Social">
<!--Facebook--><a href="URL FACEBOOK" target="_blank"><img class="Facebook-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBmJJHbLhYT7CMkQY5U8hkBn3iYwrATg2HPHKZ9NwAbcuYJxVCrQsEZNBst48OtgWOLEVDhbYtQqIpSlT1fzZW2UeID6FaA0002nvro3l-TN9gy69gAolF5eLhGKv3FxYwnpla52QlL67g/s1600/Facebook.png" width="48" height="48"></a>
<!--Twitter--><a href="URL TWITTER" target="_blank"><img class="Twitter-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj7ogRhKSE30LS_cLgHiwAMI4aKnzUH70MQc3rYW649949eGRKMSkEXFMuYCbsrtTTY-XEfv0PtskPeOP0Kxhlweqfh6neyUpcgdT3mFzJkvg6rX8EbqBZAT_6Ct8XfoqpSih9emof2ZWeZ/s1600/Twitter.png" width="48" height="48"></a>
<!--Google Plus--><a href="URL GOOGLE PLUS" target="_blank"><img class="GooglePlus-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_eBNRe1FnSfoPxCcFk9-k6uY8GxFPK9CfW0AVhm1f6vv0FqgsQ-JzybefBxhPy51EG_ob_wqFRZZeenlDfbvBb6gOV_nAK1khrPv-UYpOKFGrqJswxiz0QJt72O9Gw7tO-qO_O7lkFZnA/s1600/Google-plus.png" width="48" height="48"></a>
<!--Youtube--><a href="URL YOUTUBE" target="_blank"><img class="YouTube-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghOCpq1jRZ5N1JMtf0lLdgtrWWZS8IaFLoVMiLuc58IzfW8XLz8y2FO2dkyQD_C8-dBdtpgZJwV2gl-lhOHf9ndtwr79MPKs67Koz6k928vV7OqRdTzBftphXLGNl1eESFyNjyBEjEsaZh/s1600/Youtube.png" width="48" height="48"></a>
<!--RSS--><a href="URL RSS" target="_blank"><img class="RSS-Social" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7n-5c3ynf-TcrBgTbG6z4L3QnIiDiY1uU8Gpm_ewbK9KRObUrTgKbue9OnBzfP74hCpeV16NAEjIQ62q1Br5qdJF0AlyT3zav6XJ5jCQva6oROIXshNzTWgBoeuL6A26vcw-rOlO8LdfB/s1600/RSS.png" width="48" height="48"></a>
</div>
Reemplaza lo que está en
rojo por lo que indica en cada caso.
Nota:Si deseas que los iconos sean cuadrados, en el código anterior busca:
border-radius: 50%
Y cambia el
50% por
0%