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%


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

Deja una respuesta

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