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:
Si deseas que los iconos sean cuadrados, en el código anterior busca:
border-radius: 50%
Y cambia el 50% por 0%
12 comentarios
Anonymous · octubre 18, 2013 a las 4:08 pm
Estos iconos verdaderamente son buenos gracias ! lo pondre en mi blog 😀
Alonso Contreras · octubre 18, 2013 a las 11:51 pm
excelentes iconos, me gustán :3
Alonso Contreras · octubre 18, 2013 a las 11:52 pm
excelentes iconos, me gustán :3 !
Juvinao · octubre 19, 2013 a las 8:06 pm
Alonso gracias por comentar, muy graciosos los memes 😉
Saludos
Juvinao · octubre 19, 2013 a las 8:06 pm
Si amigo son excelentes los iconos.
Saludos
Carlo_Andre · octubre 21, 2013 a las 1:47 am
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
Jonathan LR · octubre 21, 2013 a las 4:36 pm
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
Jonathan LR · octubre 21, 2013 a las 5:03 pm
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
Juvinao · octubre 21, 2013 a las 6:49 pm
Carlo mira ya hice el tutorial 😉
http://www.miltrucosblogger.info/2013/10/marcadores-sociales-de-mil-trucos-blogger-para-tu-blog.html
siempre ayudando · febrero 12, 2014 a las 3:11 pm
disculpa diras q soy tonta pero me quiero sacar la duda que es el url RSS
Btrix · abril 15, 2014 a las 8:35 pm
Me encantan!, pero no hay de otras redes instagram, foursquare, blogloving,printerest
saludos
Hayder Juvinao · abril 21, 2014 a las 4:37 pm
Amigo puedes buscar mas iconos sociales en la categoría de Redes Sociales:
http://www.miltrucosblogger.info/search/label/Redes%20Sociales