ICONOS DE SUSCRIPCIÓN QUE GIRAN AL PASAR EL CURSOR

by - noviembre 22, 2020

ICONOS DE SUSCRIPCIÓN QUE GIRAN AL PASAR EL CURSOR.


 



Hacía ya mucho tiempo que no dedicaba tiempo a diseñar nuevos trucos de botones sociales, así que hoy que he tenido algo de tiempo libre decidí hacer unos iconos de suscripción para Blogger (también sirven para Wordpres ) que con un pequeño efecto CSS giran cuando se pasa el cursor por encima de ellos.





Para agregar este truco a tu blog de Blogger, ve a Diseño, Añadir Gadget, HTML/JavaScript, estando allí pega lo siguiente:


Para instalarlo en vuestro Bloc solo tenéis que seguir estos pasos:



Ir a Blogger  


1-Un clic en “Diseño”                                                



2-Clic en “Añadir un gadget”                                    



3-Busca el widget que dice “HTML-Javascript” y ábrelo                         





4-Coloca el siguiente codigo en el interior





<center><div id="socialicons">
 <a href="URL DE TU PERFIL DE FACEBOOK" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_F7zbIsFOrZR-HBi1AKx8grLFXpFeD_Ez1VVSyMPzrxX_yc6Rig9nXRr4f0FBFeCI82k7O27j7-GB8QvhinqbW78or_ut6RVHfvY92PpgR2mVtjZnv-kTphzZ0j3oSJhyphenhyphenonJeFWXF99_G/s200/facebook.png" width="50" /></a><a href="URL DE TU PERFIL DE G+" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig_cyWJ70jCooe_xW2SJgzAGDZyQFZwYF-VHB8AI8zdcm2LPmIqr9OYhI82QA8MlfodxtJ9UE1mMF4USMvN6Hih9JjHQMQhbvYdshIYJg5VXpojTHXmrYQuSsWhIwfL1DAuy-YP2TX-1cf/s200/google-plus.png" style="cursor: move;" width="50" /></a><a href="URL DE TU INSTAGRAM" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnWRE9TQJv2CjMLkpI8W3Df_VwqOxuJrbpZLrN2RnExBdg0T0xU4Iop3OnwcZ6vD4ePHy2y3w3AjDxUGxVoTwYqnEHwcPiRPdX7cqBA1_waSC20SvDibGvmEFnQpn29Jzlg8eLtFF17YQ8/s200/instagram.png" width="50" /></a><a href="URL DE TU TWITTER" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="50" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXSg4_PzBv4T_74a-CRNyQ9YWv9OzCDat-XrUhgbzsF37khgpBais-PiBgGc8kN8ffiI-BhSPlUBKTeqw8AZBqv9QU_RCUemONADxkGg4kLFAIo9Xbv81NpEqAkoFTNVscfK7xNt1Wj7DB/s200/twitter.png" width="50" /></a></div></center>

<style>
 #socialicons 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;}
 #socialicons img:hover{
 -moz-transform: rotate(360deg);
 -webkit-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 transform: rotate(360deg);}
 </style>


Despues de haber insertado el código, un clic en  "Guardar"







Fecha de la Publicación;  22/11/2020


Fuente miltrucosblogger.



Publicado por:                                                     
Tags : , ,

You May Also Like

0 comentarios

Created with by ThemeXpose