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

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/AVvXsEhOUx2VLiquYyfJnaNynbsiahhXj5quDMdkWmkH5vF83CydIwn1UwtAwOhO6l5J27kHUxjvD4iSTGRcTW4ylb9mlqfJet0qm35H_eGoR7oecjHGwLv9hdwSCDvXZs_LH2b2h72TuNzVhJjH/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/AVvXsEh4ksKPyWVVQOkBXC1VUIDOeeM2AUz8sLb5racL0pNUDq9839uvdF-cdy6ptXiVRmmhxBEBKasB_rd4JPxWgdE3nOJt1tvpDzvwiBgV-Qzzm9yZ2mVgbOiqaHwJXBcBSBLH8IWtSrYwgtGz/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/AVvXsEhyPjFpAE_FmSqoGGVKzRqbmdjyAj9w9HENUk6HzHRYPVFXBz0j4_KNJIQTdMQ0BusAbhKpQJsvAgU0w6MuOTgQDgBbt1pY5gQY-vfqqHvWmaVt_tlzuUw4Q-QXAcKTrC9xqYo5AYFA0G4h/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/AVvXsEivsZev0aUhT4iGJLtvT2CYFM0RTh0QrCnoOiEsEN8BmPW95Ru0t6R-gm7J7ydqrvIQe3lz8Z95GWcvH-Osn_Yu3Lw_I8xjvnKx1fNzYNc9Z9swrWdfWYtt-kPHEaxm7AuzPGVrjRbgAlFH/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/AVvXsEgiy5pv_TYP1gWb71YlYk_-yRDcVYSeZf8Oph9pseSIfT5e3Pmg2Vkzr1_OxHGsXm2k4WfIyLm0-GpgrulKWTj5Ni2sBEI9rYrdeRKgxiddX9jVaToyJyOSJVyUrc-MW7ITHsZMUbQgTIH1/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%