Tutorial: Iconos sociales que giran al pasar el cursor.

  • Autor Autor GaboTs
  • Fecha de inicio Fecha de inicio
G

GaboTs

Épsilon
Social Media
3d.webp

En este tutorial aprenderemos como agregar iconos sociales que giran al pasar el cursor, es muy fácil solo sigue los pasos.




PASO 1

Vamos a "DISEÑO"

oW5gwe4.png


PASO 2

Click en "Añadir Gadget" Y luego buscamos "HTML/Javascript"

gvHJjuU.png


HTML/Javascript

ursGgPT.png



Y una ves ahí adentro copiamos y pegamos el siguiente codigo

Insertar CODE, HTML o PHP:
<style>
#ayudadeblogger_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;
}

#ayudadeblogger_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
</style>

<center><p id="ayudadeblogger_socialicons">
    <a href="http://www.facebook.com/[COLOR="#FF0000"]TU PAGINA DE FACEBOOK[/COLOR]"><img src="http://3.bp.blogspot.com/-eG9bPvyOXro/UPBYTmI8VEI/AAAAAAAAJqI/TFBZzBxJ59c/s1600/NBT+facebook+icon.png" /></a>

    <a href="http://www.twitter.com/[COLOR="#FF0000"]TU TWITTER[/COLOR]"><img src="http://4.bp.blogspot.com/-dB0P2JmL6QA/UPBYVfvhyII/AAAAAAAAJqU/HFD5UeTJck8/s1600/NBT+twitter+icon.png" /></a>

    <a href="https://plus.google.com/[COLOR="#FF0000"]TU GOOGLE +[/COLOR]"><img src="http://1.bp.blogspot.com/-XU8OI90JZQc/UPBYUKmev_I/AAAAAAAAJqM/FPgdcMimraQ/s1600/NBT+google+plus+icon.png" /></a>

    <a href="http://www.feeds.feedburner.com/[COLOR="#FF0000"]TU FEED[/COLOR]"><img src="http://4.bp.blogspot.com/-YPkJD-sewC8/UPBYWk9dzBI/AAAAAAAAJqg/D3FVlAJz4VE/s1600/NBT+rss+feed+icon.png" /></a></p></center>


Y despues le damos en "GUARDAR"

yevyHQf.png


Eso ah sido todo

Más adelante les traeré tutos mejores..... ¡ESPERENLOS!
 
Me gusta, simples y elegantes a la misma vez :encouragement:
Gracias me lo guardo.
 
No me funciona el demo, solo lo veo así:

mxoVu7S.png
 
Gracias se miran muy bien en mi blog
 
Última edición:
Muy elegantes, buen tuto! 😉

---------- Post agregado el 21-jun-2014 hora: 05:01 ----------

Amigo le da un detalle soberbio (Me acorde de burro en Shrek 1 jaajaj) No tiene el icono pero de Youtube?
 
Atrás
Arriba