8 sep. 2013

Como Poner Iconos de Redes Sociales para web y Blogger

 Iconos de redes sociales para blogger y web

Vamos a colocar Iconos de redes sociales en nuestro blog o también para paginas web, ya había explicado como poner estos botones sociales, pero ahora traigo mas iconos sociales y mejores y están listos para colocarlos en tu blog o web, si usas wordpress, blogger o cualquier otro servicio no te preocupes el código de estos botones sociales esta optimizados y la imágenes también, así tendrás mas popularidad entre tus seguidores.


Bien, los iconos están completamente optimizados y son de diferentes tamaños, los mas populares (32px, 40px y 48px), cada icono tiene la etiqueta alt, (esta sirve para mostrar texto alterno a los buscadores si no pueden abrir la imagen) y title para mostrar el titulo de la imagen, y cada uno tiene su tamaño especifico, OJO no quiero decir que es el mismo icono para los diferentes tamaños, no cada tamaño tiene su icono propio, entre otras palabras estos iconos de redes sociales para web y blogs están muy bien optimizados, si quieres puedes aprender mas sobre optimizar imágenes.



Configuracion


cada código tiene este compuesto
<a href="URL-FACEBOOK" target="_blank"><img alt="siguenos en facebook" height="40" src="http://3.bp.blogspot.com/-MQuocq7OzfU/UiXwUY81yQI/AAAAAAAAB0Q/h6-R_R2-buI/s1600/face.png" title="siguenos en facebook" width="40" /></a>

lo que esta en rojo debes remplazarlo por la url de tu usuario o pagina en la red social que escogiste,


  • remplazo la parte en rojo por la dirección de tu red social y lo mismo para twitter google+ o cualquier botón social que hayas elegido.
  • lo que esta en color azul es el texto que mostrara al pasar el cursor, si quieres puedes cambiarlo por otra frase como mira mi pagina en facebook por ejemplo.
  • y lo de color verde es el texto alternativo para los buscadores (déjalo así)

¿Como colocar estos iconos sociales en mi blog?

 

 Ahora solo debes seleccionar el icono social que quieras, y seguido o al lado de este, hay un código, ese debes copiarlo, para tener ese icono y has lo que dije en la configuración.

si usas blogger: copia el codigo -> ve a diseño -> añadir un gadget -> elige un HTML/Javascript, pega los códigos que elegiste  y guarda.

si usas wordpress: copia el codigo -> ve a Escritorio-> Apariencia-> Widgets -> elige el widget cuyo nombre es ‘Texto’-> y pegas los códigos que elegiste.

si usas otra plataforma ya veras como tu los colocas.

¡y bien están listos tus iconos de redes sociales para tus seguidores!

Para poder copiar los codigos te recomiendo acceder desde una computadora, ya que desde moviles es muy complicado.

32px 40px 48px
facebook
Síguenos en facebook Síguenos en facebook Síguenos en facebook
Síguenos en facebook Síguenos en facebook Síguenos en facebook
Google+
Síguenos en Google+ Síguenos en Google+ Síguenos en Google+
Síguenos en Google+ Síguenos en Google+ Síguenos en Google+
Síguenos en Google+ Síguenos en Google+ Síguenos en Google+
Twitter
Síguenos en Twitter Síguenos en Twitter Síguenos en Twitter
Síguenos en Twitter Síguenos en Twitter Síguenos en Twitter
Youtube
Canal de youtube Canal de youtube Canal de youtube
Canal de youtube Canal de youtube Canal de youtube
Canal de youtube Canal de youtube Canal de youtube
Likedin
Sígueme en Likedin Sígueme en Likedin Sígueme en Likedin
Pinterest
Sígueme en Pinterest Sígueme en Pinterest Sígueme en Pinterest
Sígueme en Pinterest Sígueme en Pinterest Sígueme en Pinterest
Rss feed
Rss feed Rss feed Rss feed
Delicious
sígueme en Delicious sígueme en Delicious sígueme en Delicious
sígueme en Delicious sígueme en Delicious sígueme en Delicious
Instagram
sígueme en Instagram sígueme en Instagram sígueme en Instagram
sígueme en Instagram sígueme en Instagram sígueme en Instagram
Blogger
sígueme en Blogger sígueme en Blogger sígueme en Blogger
sígueme en Blogger sígueme en Blogger sígueme en Blogger
Digg
sígueme en Digg sígueme en Digg sígueme en Digg
sígueme en Digg sígueme en Digg sígueme en Digg
Dribbble
sígueme en Dribbble sígueme en Dribbble sígueme en Dribbble
Tumblr
sígueme en Tumblr sígueme en Tumblr sígueme en Tumblr
Flickr
sígueme en Flickr sígueme en Flickr sígueme en Flickr
sígueme en Flickr sígueme en Flickr sígueme en Flickr
sígueme en Flickr sígueme en Flickr sígueme en Flickr
Picasa
sígueme en Picasa sígueme en Picasa sígueme en Picasa
sígueme en Picasa sígueme en Picasa sígueme en Picasa
Correo
sígueme por Correo sígueme por Correo sígueme por Correo
sígueme por Correo sígueme por Correo sígueme por Correo
Slideshare
sígueme en Slideshare sígueme en Slideshare sígueme en Slideshare
sígueme en Slideshare sígueme en Slideshare sígueme en Slideshare
Myspace
sígueme en Myspace sígueme en Myspace sígueme en Myspace
Orkut
sígueme en Orkut sígueme en Orkut sígueme en Orkut
sígueme en Orkut sígueme en Orkut sígueme en Orkut
Reddit
sígueme en Reddit sígueme en Reddit sígueme en Reddit
sígueme en Reddit sígueme en Reddit sígueme en Reddit
Skype
sígueme en Skype sígueme en Skype sígueme en Skype
sígueme en Skype sígueme en Skype sígueme en Skype
StumbleUpon
sígueme en StumbleUpon sígueme en StumbleUpon sígueme en StumbleUpon
sígueme en StumbleUpon sígueme en StumbleUpon sígueme en StumbleUpon
Vimeo
sígueme en Vimeo sígueme en Vimeo sígueme en Vimeo
Wordpress
sígueme en Wordpress sígueme en Wordpress sígueme en Wordpress
sígueme en Wordpress sígueme en Wordpress sígueme en Wordpress
Yahoo!
sígueme en Yahoo! sígueme en Yahoo! sígueme en Yahoo!
sígueme en Yahoo! sígueme en Yahoo! sígueme en Yahoo!
Friendfeed
sígueme en Friendfeed! sígueme en Friendfeed! sígueme en Friendfeed!
Livejournal
sígueme en Livejournal! sígueme en Livejournal! sígueme en Livejournal!
Hi5
sígueme en Hi5! sígueme en Hi5! sígueme en Hi5!
Skyrock
sígueme en Skyrock! sígueme en Skyrock! sígueme en Skyrock!
Vkontakte
sígueme en Vkontakte! sígueme en Vkontakte! sígueme en Vkontakte!

85 comentarios:

  1. Este blog ha sido eliminado por un administrador de blog.

    ResponderEliminar
    Respuestas
    1. esta chulo sobre todo la plantilla como la decoraste de 1 al 10 te mereces un 100 :)

      Eliminar
    2. Muchas gracias por tu ayuda, me sisrvio un mucho, me podrias decir como para que me queden pegados, muchas gracias.

      Eliminar
  2. me interesa mas el efecto que tiene esta misma pagina, cuando pasa el mouse por encima de icono de la rede social cambia de cuadrado a redondo........... cual es el codigo,, Gracias.

    ResponderEliminar
  3. GRACIAS GRACIAS GRACIAS GRACIAS!!!! Me ha costado encontrar un lugar donde expliquen esto de forma fácil!! MIL GRACIAS!!

    ResponderEliminar
  4. Bien ! Justo lo que buscaba, simple y concreto, fácil ! Gracias !

    ResponderEliminar
  5. Gracias por la aportación. Aunque igual que a T.k. me gustan los que tienes en esta página que cambian al poner el mouse encima. ¿Cómo podemos insertarlos o conseguir el código? Saludos.

    ResponderEliminar
    Respuestas
    1. hola fc..para hacer que cambie a circulo cuando pasas por encima, en el codigo css, has de añadir debajo de los estilo del boton (posicion,etc...), un :hover, y decirle que tenga border-radius:50%.--
      sería algo así:
      .icono {
      position: relative;
      left: 10vw;
      top: 10vh;
      transition: all 0.3s ease;
      }
      .icono:hover {
      border-radius:50%;
      }

      --espero te haya servido de ayuda--

      Eliminar
  6. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. lo que pasa es que tienes que reconocer mi autoria sobre el contenido

      Eliminar
  7. muchas gracias en especial por que tienes los iconos en todas las versiones !

    ResponderEliminar
  8. Yo he intentado de todo para ponerlo en horizontal en mi web 1&1 pero nada... Se me ponen en vertical. No se que hacer...

    ResponderEliminar
    Respuestas
    1. Hola "pre-parada" mira copia esto:

      style='display:inline-block;' despues "url facebook" asi le haces con todos

      Eliminar
    2. la solución es muy facil solo crea una etiqueta html llamada div dentro dicha etiqueta pones el codigo y cierras el div y ya listo!!!!

      Eliminar
  9. la solucion a ese problema Pre-parada es creando una etiqueta div
    luego pones el codigo dentro del div y listo

    ResponderEliminar
  10. Respuestas
    1. el del icono que quieras primero y luego el otro al lado

      Eliminar
  11. Este blog ha sido eliminado por un administrador de blog.

    ResponderEliminar
  12. por fin los encontre jaja, muchas gracias, para usar el del correo tengo que poner mi cuenta de correo?

    ResponderEliminar
  13. Sabes si ask, y we heart it tienen?? Oh y gracias.

    ResponderEliminar
  14. muy buen aporte me sirvio de muchisimo si puedes ayudamen con la caja de likebox

    ResponderEliminar
  15. Muchas gracias por esta entrada, ha sido de gran ayuda!

    ResponderEliminar
  16. Hola, ya lo hice, pero quisiera saber cómo hago para que los iconos sean más pequeños por favor.

    ResponderEliminar
  17. Gracias por su aporte, fue de gran importancia, sigue así, compartiendo conocimientos,

    No como otros que se mueren y se los llevan ;)

    ResponderEliminar
  18. Me ha servido mucho tu enseñanza. Ya que no tenia idea de cómo colocarle los iconos a mi página. Gracias

    ResponderEliminar
  19. Hola ¿Tendrás el icono de wattpad?

    ResponderEliminar
  20. Excelente. Justo lo que necesitaba. Muchas gracias!

    ResponderEliminar
  21. Hola buenas tardes! Disculpa si quisiéramos que también nos de la opción para compartir por ejemplo una nota en Facebook, Twitter, etc. Sabes el código que se tiene que usar?
    Gracias, saludos!

    ResponderEliminar
  22. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  23. Excelente post, muy útil, rápido, cómo y sencillo.

    ResponderEliminar
  24. de casualidad no tienes un icono de google maps

    ResponderEliminar
  25. ¡¡Muchas gracias!! Nos lo has puesto muy fácil ;-) Me ha sido muy útil.

    ResponderEliminar
  26. ¿Podrías hacer un icono de WeHeartit si no es mucho pedir? Me encanta todo, solo necesito eso. Gracias :)

    ResponderEliminar
  27. Mi hermano, muchas gracias por compartir tu conocimiento.

    ResponderEliminar
  28. Gracias,en verdad me ha sido de mucha ayuda :) Me gustaría también, si es posible pudieras agregara a esta lista el icono de whatsapp , he visto que algunos blogs disponen de el como opcion para compartir contenido. Estaré pendiente por si asi fuera o por si alguien mas me pudiera ayudar con esto.
    Nuevamente, Gracias!

    ResponderEliminar
  29. falta muchas cosas un menu de los temas q vas a escribir

    ResponderEliminar
    Respuestas
    1. Que? te refieres a una pagina donde muestre los temas que escribire en el futuro?

      Eliminar
    2. Me falta el icono de Whatsapp. eso como puedo hacer,, me podrías dar unos datos..gracias!

      Eliminar
  30. Hola Tengo una pregunta, donde guardaste las imagenes de los iconos de las redes sociales, las tuyas me funcionan perfecto pero me gustaria personalizarlas un poco, podrias explicarme?

    ResponderEliminar
    Respuestas
    1. claro, simplemente sube los iconos a blogger como si subieras una imagen normal y copias sus URL de imagen, esas imagenes se guardan en albunes web de picasa, si tienes blog ve a esa pagina y estarán ahí

      Eliminar
  31. Mucha gracias por compartir tus conocimientos. lo necesitaba y por fin lo econtre..Gracias de verdad!

    ResponderEliminar
  32. TE HAS ESPESIFICADO GENIAL, MUCHAS GRACIAS

    ResponderEliminar
  33. Excelente me ha servido mucho esta información.

    ResponderEliminar
  34. disculpa como saco la url de cualquier pagina web

    ResponderEliminar
  35. es un artículo genial, excelente, claro y sin mucha muela. gracias

    ResponderEliminar
  36. Excelente blog amigo. Espero que continúe activo. Gracias.

    ResponderEliminar
  37. Saludos.

    dentro de todas las paginas que hay para agregar botones sociales a tu blog esta es la que mas me ha gustado muy facil hacerlo.
    esta muy bien

    ResponderEliminar
  38. Y para que queden igual que los que estan en esta pag?

    ResponderEliminar
  39. Muy bueno saber implementar un icono propio, pero cómo hago para compartir, no la página, sino un contenido específico de la página. Una foto, o un artículo, o noticia.
    Si alguien sabe, agradecería me lo dijese,estoy buscando la forma y no hay "forma".
    Un saludo

    ResponderEliminar
  40. Muchas gracias por tu ayuda, me ha sido muy útil

    ResponderEliminar
  41. Muchas gracias! me fue demasiado útil este post. Saludos amigo. Estoy empezando en esto del blogging y SEO.

    ResponderEliminar
  42. Excelente, después de dos días intentando colocar los botones casi me vuelvo loca :o Muchas gracias. Me funcionó de maravilla :)

    ResponderEliminar
  43. Hola, me gustaría saber cómo lo hiciste o de donde lo sacaste, ya que me gustaría editar uno y poner otra foto. Soy muy curioso y quisiera crear mi propio botón.

    ResponderEliminar
    Respuestas
    1. Y de paso, ¿cómo se configura lo del correo?

      Eliminar
  44. Quede encantada de la manera tan sencilla en como lo has compartido, esto me ha facilitado todo!

    Muchas gracias!
    Una seguidora mas!

    ResponderEliminar
  45. Muchas gracias excelente contenido, me encanto!!

    ResponderEliminar

2016 © Inovablog