Mil Trucos Blogger

Iconos Sociales que giran y cambian de color al pasar el cursor

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado
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="http://4.bp.blogspot.com/-1KHbJBKyVGE/UfWZ7_7srVI/AAAAAAAADxI/HoWoYzJ6IWY/s1600/Facebook.png" width="48" height="48"></a>
<!--Twitter--><a href="URL TWITTER" target="_blank"><img class="Twitter-Social" src="http://3.bp.blogspot.com/-CVGXUXWGXFs/UfWZ8k9WTbI/AAAAAAAADxg/fbB7j-gifFM/s1600/Twitter.png" width="48" height="48"></a>
<!--Google Plus--><a href="URL GOOGLE PLUS" target="_blank"><img class="GooglePlus-Social" src="http://1.bp.blogspot.com/-UepQee72j4s/UfWZ71vJycI/AAAAAAAADxU/Hjqb7S3JHMQ/s1600/Google-plus.png" width="48" height="48"></a>
<!--Youtube--><a href="URL YOUTUBE" target="_blank"><img class="YouTube-Social" src="http://1.bp.blogspot.com/-cyIL3xcJOZQ/UfWZ80FdsNI/AAAAAAAADxs/W8dHT-kO5C0/s1600/Youtube.png" width="48" height="48"></a>
<!--RSS--><a href="URL RSS" target="_blank"><img class="RSS-Social" src="http://2.bp.blogspot.com/-sc0wZAPZEVI/UfWZ8CqDvnI/AAAAAAAADxY/KIXCFRzqO3Q/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%

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

12 Comentarios

  1. Anonymous Anonymous
    Octubre 18, 2013    

    Estos iconos verdaderamente son buenos gracias ! lo pondre en mi blog 😀

  2. Alonso Contreras Alonso Contreras
    Octubre 18, 2013    

    excelentes iconos, me gustán :3

  3. Alonso Contreras Alonso Contreras
    Octubre 18, 2013    

    excelentes iconos, me gustán :3 !

  4. Juvinao Juvinao
    Octubre 19, 2013    

    Alonso gracias por comentar, muy graciosos los memes 😉

    Saludos

  5. Juvinao Juvinao
    Octubre 19, 2013    

    Si amigo son excelentes los iconos.

    Saludos

  6. Carlo_Andre Carlo_Andre
    Octubre 21, 2013    

    Amigo disculpa que este comentario no sea relacionado con el pos pero me muero de las ganas de saber como poner la parte que tienes al final de todas las entradas lo que dice SI TE GUSTA COMPARTELO- incluido las tres redes sociales podrias hacer un post sobre eso te lo agradeceria saludos

  7. Octubre 21, 2013    

    Hola Carlo, ese post del que hablas ya se había hecho anteriormente, mira aquí está la entrada: http://www.miltrucosblogger.info/2013/10/marcadores-sociales-de-mil-trucos-blogger-para-tu-blog.html

  8. Octubre 21, 2013    

    Nuestro amigo y fundador de este blog Hayder Juvinao, ya había hecho una entrada sobre esos marcadores sociales. Revisa en la pagina de entradas N° 2

  9. Juvinao Juvinao
    Octubre 21, 2013    
  10. Febrero 12, 2014    

    disculpa diras q soy tonta pero me quiero sacar la duda que es el url RSS

  11. Abril 15, 2014    

    Me encantan!, pero no hay de otras redes instagram, foursquare, blogloving,printerest

    saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo