Iconos sociales en 3D que giran 360 grados


Aquí te mostraré cómo agregar estos iconos a tu blog, para que vincules tus perfiles sociales con iconos en 3D que giran cuando se pone el cursor sobre cada icono 360 grados y  luego giran hacia atrás 360 cuando se retira el cursor.

Ir a Diseño en "Añadir un gadget", seleccione 'Html Javascript' y pegar el código que dejo abajo, solo hay que reemplazar lo que esta en en rojo y amarillo por la URL correspondiente y guárdalo.

Este es el código:

Este es el código:


<style>#social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="Url-Feed"target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj27lpZyXa3FRuRGNWCT4GMAgZyO6R7d_aJlc-3TgzoImlI9oRizE7v2rJTKqyVoq-1ST-8Bdg2myLmhkLr4rr8J-DkUGjnN94jJhCQls_wBgpddOFWrKnFkYAC_6HMSn8tG4mFo-OFkTT-/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="Url-Email-Rss" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEja_GpNuqVS4hQU7vhaI0gBSuGMJ_uXoJspxMNVwQewBLBuYEcLHnR2OQdwszV49BMtf_icEuS1Cj2VaKhvyD44JKINFlc_ROAZQ3VXWtWssyQ7w9OSYKJuXVyO9gSFwNmreiO9ssZ1ft6b/s1600/RSS-EMAIL-48x48.png"style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="Url-Facebook" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4wKeTgLQD8IwW099ksw5DIHljG-a1FNyNi52WJaS4aYgvUYbFO0RRrodFkzqobBRmT79Bkan5QegfrREHslDQtAMOaZPVQS9xKH_8Pt8NqhEasv6gGwVZbjFjCTsCgjR6p8gkNWswKnVT/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="Url-Twitter" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0N7CwrX6RXQfoLUvXo_RBW_w4_7bMLMvhuHaaOLyfJ2xAoov9_i1EzR4fEaeWaiKf4A6RmYJnw2hlRNvN_y3Xnf-5i9InGs6_QdGwlgcASwBXT9PZgAmXn0YigqMG6e_FWX6UAHYG8e0_/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="Url-Google" target="_blank"><img style="margin-right:1px;"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjogU1pGbUsMl2YjUMNm-BM__3Ler0DuQ4J8qg4oRpme3UYsHV83ZvvY0vBSjy1yGPzqJcb0UdKwkeRs_16L1_sDHLz0qSgszvD8Ics2IEMjx0lbTvGAqh-BQIhVlfDSngz628Uu_0fQYsR/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="Url-Pinterest" target="_blank"><img style="margin-right:1px;"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9YOfGHdxNeUBNir7yxsPn-3eiVwnAw1ew9wMhy_xmAFBa0Uk8JALbZ7fdNPABxdTcN3pzxuQN98lFcjcSlW8kXAmauURMRfr7IEVfWNscd-DuD6_ou1bG2Wf0sTump_NOHHp9TFkv-ar0/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/>


Este es el resultado:



Icon Icon Icon Icon Follow Me on Pinterest

No hay comentarios:

Publicar un comentario

✭¡Anímate a comentar! ♥Tu opinión es muy importante para mí♥