{Css Soldier}

CSS, HTML, JAVASCRIPT, Trucos, Tutoriales & Plantillas Blogger.

Iconos sociales que cambian de color al pasar el mouse



Las redes sociales juegan actualmente un papel importe en la difusión de muchas paginas, ya que por medio de estas se llega a muchas personas que están utilizando estas, si tenemos una pagina, o un perfil en cualquiera de ellas y queremos insertarlo en nuestro blog o pagina web podemos hacerlo fácilmente.

Hoy veremos como insertar una barra de iconos sociales (estilo windows 8) que cambian de color al pasar el mouse sobre ellos.

A continuación pueden ver los iconos en funcionamiento:



Y bueno sin mas que decir vamos a hacer esto ya mismo!


Nos vamos a  Diseño estando ahí agregamos un Gadget tipo HTML/JavaScript, en Título lo dejamos en blanco y luego en Contenido agregamos lo siguiente.

<!--Facebook -->
<a href="https://www.facebook.com/" target="_blank"><img src="http://1.bp.blogspot.com/-3bE8k9KvtNg/Uc38YH2msbI/AAAAAAAADhs/Jfpgu8dgeR4/s320/Facebook+black.png" width="48" height="48" onMouseOver="this.src='http://4.bp.blogspot.com/-ZGZ32A7JztE/Uc38YCZ4mlI/AAAAAAAADh4/zfsqt9np3TA/s320/Facebook.png';" onMouseOut="this.src='http://1.bp.blogspot.com/-3bE8k9KvtNg/Uc38YH2msbI/AAAAAAAADhs/Jfpgu8dgeR4/s320/Facebook+black.png';"/></a><!--Twitter --><a href="https://twitter.com/" target="_blank"><img src="http://1.bp.blogspot.com/-LuOEg8j0HX0/Uc38ZoK1CkI/AAAAAAAADiQ/AceEyrgmEvQ/s320/Twitter+black.png" width="48" height="48" onMouseOver="this.src='http://2.bp.blogspot.com/-3HeBrHMs5qI/Uc38Z1RjJTI/AAAAAAAADiw/RYSUQ-j_kJU/s320/Twitter.png';" onMouseOut="this.src='http://1.bp.blogspot.com/-LuOEg8j0HX0/Uc38ZoK1CkI/AAAAAAAADiQ/AceEyrgmEvQ/s320/Twitter+black.png';"/></a><!--Google + --><a href="https://plus.google.com/" target="_blank"><img src="http://1.bp.blogspot.com/-B6cl-D26y-Y/Uc38YH65FnI/AAAAAAAADhw/cREbI1Pam5U/s320/Google++B.png" width="48" height="48" onMouseOver="this.src='http://4.bp.blogspot.com/-HwwGqZB7yQE/Uc38YpyQehI/AAAAAAAADiA/AWexxju7b9A/s320/Google++alt.png';" onMouseOut="this.src='http://1.bp.blogspot.com/-B6cl-D26y-Y/Uc38YH65FnI/AAAAAAAADhw/cREbI1Pam5U/s320/Google++B.png';"/></a><!--YouTube --><a href="http://www.youtube.com/" target="_blank"><img src="http://4.bp.blogspot.com/-6dIbQZRDwus/Uc38aFgXa3I/AAAAAAAADik/fyZoE940kfU/s320/YouTube+Black.png" width="48" height="48" onMouseOver="this.src='http://4.bp.blogspot.com/-BNqco9_C-GE/Uc38admJ2SI/AAAAAAAADio/u3EjY7nZp8g/s320/YouTube.png';" onMouseOut="this.src='http://4.bp.blogspot.com/-6dIbQZRDwus/Uc38aFgXa3I/AAAAAAAADik/fyZoE940kfU/s320/YouTube+Black.png';"/></a><!--RSS --><a href="http://feeds.feedburner.com/" target="_blank"><img src="http://4.bp.blogspot.com/-PgSDOO01EXo/Uc38ZEDWcYI/AAAAAAAADiU/srYaojV-CJI/s320/RSS+Feed+black.png" width="48" height="48" onMouseOver="this.src='http://2.bp.blogspot.com/-t4dmF0eCBqU/Uc38ZLgpxNI/AAAAAAAADiM/DeHosJOiT-g/s320/RSS+Feed.png';" onMouseOut="this.src='http://4.bp.blogspot.com/-PgSDOO01EXo/Uc38ZEDWcYI/AAAAAAAADiU/srYaojV-CJI/s320/RSS+Feed+black.png';"/></a>
La única modificación que haremos sera en los links de los elementos que estan en color NARANJA, y pondríamos los nuestros.

 
Si queremos quitar algún elemento solamente tenemos que borrar de donde esta el comentario adicional en VERDE hasta topar con el siguiente comentario adicional. Supongamos que quiero eliminar  Youtube, se eliminaría lo siguiente: 

<!--YouTube --><a href="http://www.youtube.com/" target="_blank"><img src="http://4.bp.blogspot.com/-6dIbQZRDwus/Uc38aFgXa3I/AAAAAAAADik/fyZoE940kfU/s320/YouTube+Black.png" width="48" height="48" onMouseOver="this.src='http://4.bp.blogspot.com/-BNqco9_C-GE/Uc38admJ2SI/AAAAAAAADio/u3EjY7nZp8g/s320/YouTube.png';" onMouseOut="this.src='http://4.bp.blogspot.com/-6dIbQZRDwus/Uc38aFgXa3I/AAAAAAAADik/fyZoE940kfU/s320/YouTube+Black.png';"/></a><!--RSS -->

Se borra desde Youtube todo lo que esta en rojo hasta topas con el siguiente elemento que es RSS.


Ahora bien si queremos que estos estén flotando en alguna parte de la pagina podemos ir a este blog de pruebas y ver como queda.

Si queremos tenerlo así agregaremos lo siguiente antes de nuestro código anterior

<center style='position:fixed; top:0; right:0;' >

Nota: podemos cambiar la posición, solo tenemos que remplazar el top por bottom si la quieres abajo, y right por left si la quieres a la izquierda.

 y al final agregamos
</center>

Quedando así: 

<center style='position:fixed; top:0; right:0;' >
<!--Facebook -->
<a href="https://www.facebook.com/" target="_blank"><img src="http://1.bp.blogspot.com/-3bE8k9KvtNg/Uc38YH2msbI/AAAAAAAADhs/Jfpgu8dgeR4/s320/Facebook+black.png" width="48" height="48" onMouseOver="this.src='http://4.bp.blogspot.com/-ZGZ32A7JztE/Uc38YCZ4mlI/AAAAAAAADh4/zfsqt9np3TA/s320/Facebook.png';" onMouseOut="this.src='http://1.bp.blogspot.com/-3bE8k9KvtNg/Uc38YH2msbI/AAAAAAAADhs/Jfpgu8dgeR4/s320/Facebook+black.png';"/></a><!--Twitter --><a href="https://twitter.com/" target="_blank"><img src="http://1.bp.blogspot.com/-LuOEg8j0HX0/Uc38ZoK1CkI/AAAAAAAADiQ/AceEyrgmEvQ/s320/Twitter+black.png" width="48" height="48" onMouseOver="this.src='http://2.bp.blogspot.com/-3HeBrHMs5qI/Uc38Z1RjJTI/AAAAAAAADiw/RYSUQ-j_kJU/s320/Twitter.png';" onMouseOut="this.src='http://1.bp.blogspot.com/-LuOEg8j0HX0/Uc38ZoK1CkI/AAAAAAAADiQ/AceEyrgmEvQ/s320/Twitter+black.png';"/></a><!--Google + --><a href="https://plus.google.com/" target="_blank"><img src="http://1.bp.blogspot.com/-B6cl-D26y-Y/Uc38YH65FnI/AAAAAAAADhw/cREbI1Pam5U/s320/Google++B.png" width="48" height="48" onMouseOver="this.src='http://4.bp.blogspot.com/-HwwGqZB7yQE/Uc38YpyQehI/AAAAAAAADiA/AWexxju7b9A/s320/Google++alt.png';" onMouseOut="this.src='http://1.bp.blogspot.com/-B6cl-D26y-Y/Uc38YH65FnI/AAAAAAAADhw/cREbI1Pam5U/s320/Google++B.png';"/></a><!--YouTube --><a href="http://www.youtube.com/" target="_blank"><img src="http://4.bp.blogspot.com/-6dIbQZRDwus/Uc38aFgXa3I/AAAAAAAADik/fyZoE940kfU/s320/YouTube+Black.png" width="48" height="48" onMouseOver="this.src='http://4.bp.blogspot.com/-BNqco9_C-GE/Uc38admJ2SI/AAAAAAAADio/u3EjY7nZp8g/s320/YouTube.png';" onMouseOut="this.src='http://4.bp.blogspot.com/-6dIbQZRDwus/Uc38aFgXa3I/AAAAAAAADik/fyZoE940kfU/s320/YouTube+Black.png';"/></a><!--RSS --><a href="http://feeds.feedburner.com/" target="_blank"><img src="http://4.bp.blogspot.com/-PgSDOO01EXo/Uc38ZEDWcYI/AAAAAAAADiU/srYaojV-CJI/s320/RSS+Feed+black.png" width="48" height="48" onMouseOver="this.src='http://2.bp.blogspot.com/-t4dmF0eCBqU/Uc38ZLgpxNI/AAAAAAAADiM/DeHosJOiT-g/s320/RSS+Feed.png';" onMouseOut="this.src='http://4.bp.blogspot.com/-PgSDOO01EXo/Uc38ZEDWcYI/AAAAAAAADiU/srYaojV-CJI/s320/RSS+Feed+black.png';"/></a>
</center>

Si tienen alguna duda, no duden en dejar un comentario o mandar un correo y te responderé lo mas pronto posible.



4 comentarios:

  1. Me gustaron mucho :) pero te quería pedir un favor, puedes agregar el icono de tumblr? (:

    ResponderEliminar