25 noviembre 2013

Tutorial Blogger: ¿Cómo añadir iconos de redes sociales?

¡Hola bombones! Últimamente me preguntáis mucho por el diseño de mi blog así que he decidido que de vez en cuando iré subiendo algún tutorial para ayudaros a poner bonitos vuestros blogs. ¿Qué os parece?
He de decir antes de nada que yo no soy experta, no me dedico ni estudio diseño. Pero me gusta mucho este mundillo, supongo que ya lo sabréis porque siempre estoy cambiando el aspecto del blog. 

Este tutorial me lo pidió Marta del blog Moda frainteso y trata de como poner iconos de redes sociales en nuestro blog tal que así:


Es un tutorial sencillito y que queda genial. Si queréis saber como hacerlo, ¡Seguir leyendo!
NOTA: podéis hacer click en las imágenes para hacerlas más grandes y verlas mejor.


Lo primero que tenemos que hacer es buscar los iconos que queramos. Vamos a Google Imágenes y probamos buscando con: "Iconos redes sociales", "Iconos redes sociales gratis" o depende de la forma en que queramos podemos poner "Iconos sociales redondeados, cuadrados..." 
De todos modos aquí abajo os dejo dos sugerencias de entradas con iconos muy chulos que seguro que os encantan:

NOTA: Para este tutorial he tomado prestados los iconos de Bombi blogs: créditos para Stefy, ella es la dueña y creadora de los iconos, no yo.


Una vez elegidos nuestros iconos vamos a nuestro blog, al apartado de "Diseño".

 

Y una vez allí le damos a "Añadir un gadget"

Elegimos la opción de HTML/Javascript


Y una vez abierto hacemos click en "Formato RTF"


Hacemos click con el botón derecho de nuestro blog y dándole a "Pegar" pegamos los iconos que elegimos previamente.
NOTA: Si los iconos que queremos pegar no están en internet, es decir, queremos subirlos desde nuestro ordenador orimero deberemos subir las imágenes de nuestros iconos en alguna web de alojamiento de imágenes como nuestro propio blog (en una entrada nueva que guardaremos como borrador), en Tinypic, Photobucket, Tumblr... Una vez subidas a estas redes le damos sobre la imagen a "Copiar imágen" y la pegamos en nuestro Gadget HTML/Javascript


Ahora toca poner el link para que cuando hagamos click en el botón nos lleve a la red social que queramos. Seleccionamos el icono elegido y hacemos click en la bolita verde que señalo en la imagen. 


Donde dice "Escriba una URL" ponemos el link de nuestra página de Facebook, u otro dependiendo del icono que hayamos seleccionado. El paso anterior y este tendremos que hacerlo con cada icono y una vez tengamos todos linkeados hacemos click en "Guardar"

 

Guardamos los cambios en "Diseño" y le damos click a "Ver blog" para ver como quedaron. 


Si quedaron descentrados, volvemos a el gadget que habíamos guardado y nos saldrán un montón de letras (Ya que no hemos seleccionado "Formato RTF") al principio de todas esas letras escribimos <center> y al final del todo escribimos </center> guardamos y volvemos a ver como quedó. 


¡Ya está centrado! Y el tutorial acabado.

¿Tenéis dudas? Podeis contactar conmigo en: 
lasombradetusojos@gmail.com o comentar en esta misma entrada seleccionando al comentar la pestaña "Avísame" para que la respuesta sea enviada vía email.
¡Contestaré tan rápido como pueda!

¡Hasta la próxima! 

      

39 comentarios:

  1. Me parece genial la entrada!! super util y ayudas un monton, gracias guapisima!!! un besiko!!! http://sayfarandom.blogspot.com.es/

    ResponderEliminar
  2. Bueno, yo soy la que no le pidió a Laura este tutorial y... ¡tachán! Lo he conseguido. Muchas gracias guapa, de verdad. :)x
    http://fashiondidas.blogspot.com.es/

    ResponderEliminar
  3. Quiero mas tutoriales que este ya me lo sabia!!
    Besicos

    Thinking About Clothes

    ResponderEliminar
  4. genial consejo Laura, mil gracias! =)
    besitos

    ResponderEliminar
  5. Estos tutoriales me parecen super útiles!! Sabes, a mi me gustaría saber como poner una pestaña "Looks" a lo Lovely Pepa... pero busco y busco y no encuentro como hacerlo...! Si algún día descubres como, por favor, avísame!!! :P
    Un besote!

    EVERBUYING INTERNATIONAL GIVEAWAY
    Lucia Gallego Blog

    ResponderEliminar
  6. Gracias por el tutoriales pero te acabo de conocerte mi blog es www.martaajo.blogspot.com

    ResponderEliminar
  7. Muchas gracias por el tutorial, ahora es más fácil añadir gadgets a mi blog!

    Le acabo de dar like a tu página de Facebook y te acabo de seguir con Google friend connect! Espero que puedas hacer lo mismo. Si quieres, podemos seguirnos en otras plataformas. Házmelo saber!

    www.astylevictim. com

    ResponderEliminar
  8. Great post, thanks for doing it ! Besos ;)


    www.Chaneletco.blogspot.com

    ResponderEliminar
  9. genial tuto! me viene de diez.... lo voy a probar =)

    ResponderEliminar
  10. Hola Laura! No me extraña que te pregunten por el diseño de tu blog porque lo tienes muy bonito y ordenado todo. Como veo que te gusta la moda, te dejo la dirección de mi blog por si te apetece pasar a visitarme. Un beso guapa!

    http://thewardrobestaples.blogspot.com.es/

    ResponderEliminar
  11. que bien explicado, me encanta

    www.lessismoreblog.com

    ResponderEliminar
  12. Ay puesvoy a probarlo a ver que tal
    me parece genial la idea porque tu diseño de tu blog es sjaknfklñmaslkgm y tu cabecera más aún si cabe
    Un besito guapa
    http://cantabdobajolalluvia.blogspot.com

    ResponderEliminar
  13. Muy bien explicado y muy sencillo de hacer. Muchas gracias

    ResponderEliminar
  14. Hola, estoy intentando pero no me deja! ayudame plis

    ResponderEliminar
  15. pues yo soy nueva en este mundo y tengo un lio que me vuelvo loka,intente hacer todo como lo explicaste pero no me sale!!!gracias de todas formas!!!

    ResponderEliminar
    Respuestas
    1. ¿Qué te paso? Si me especificas podré ayudarte :D

      Eliminar
  16. ¿Activaste el formato TRF como índico en la imagen? Creo que ese es el problema :D

    ResponderEliminar
  17. Hola! muchas gracias por el tutorial. A mi tampoco me sale :( lo pongo en modo RTF y nada, no me deja pegar las imágenes. He descargado los iconos en formato PNG de las páginas que citaste y cuando los intento pegar no me aparece nada.
    Gracias por tu ayuda!

    ResponderEliminar
    Respuestas
    1. ¿Le diste a copiar imagen o solo a copiar? Prueba con eso!

      Eliminar
  18. Hola! :) me encanta este tutorial lo pondré en práctica, quería preguntarte si tendrás un correo, face, o algún sitio donde pueda escribirte? Pasa que quiero iniciar un blog pero hay muchísimas cosas que no entiendo, espero puedas ayudarme!! Besos

    ResponderEliminar
  19. Excelente tutorial.

    ResponderEliminar
  20. Hola , tengo un blog que he echo hace poquito y e intentado hacerlo pero no me sale . Cuando voy a pegar las imágenes no me deja y solo salen letras . Espero que me puedas ayudar y me encantan tus tutoriales

    ResponderEliminar
  21. Muchas graciass, me ha servido para ponerlo en mi blog. Saludoss

    www.detodounpocoverofrbm.blogspot.com.es

    ResponderEliminar
  22. graciasss por fin lo encontre facil y rapido . muack

    ResponderEliminar
  23. Genial tu post. ¡Fácil de entender, sencillo y contundente! Me ayudó muchoo, te felicito!

    ResponderEliminar
  24. Buenas, he vuelto a esto de blogger, tenía un blog lo vacié con la idea de crear un diseño y un objetivo, ya los tengo. Andaba buscando un tutorial para poner los iconos de las diferentes redes sociales y me topé con el tuyo, me pareció muy sencillo, el problema es el siguiente al buscar los iconos se descargan imágenes con todos los iconos y tipos, no la imagen suelta de cada icono en concreto. Cómo lo realizas para separarlos y así añadir cada vínculo a cada icono? Cortándolo con cualquier programa a la vieja usanza? Gracias.

    ResponderEliminar
  25. Holaaa tengo un problema. Cuando voy a pegar la imagen, no me sale la imagen si no letras, por que???

    ResponderEliminar
  26. Hola ! me ha servido muchísimo tu tutorial , aunque no sé si podrás decirnos cómo ponerlos alineados uno al lado del otro de manera horizontal y no en vertical.
    Gracias !!!

    ResponderEliminar
    Respuestas
    1. Dandole a center deberían de salirte alineados!

      Eliminar
  27. Me salvas la vida!! Mil gracias :)

    ResponderEliminar
  28. Y yo rompiéndome la cabeza con mapeos de imágenes y mil cosas más. ¡Me encanta que sea algo tan sencillo! Mil gracias. Tienes un blog espectacular, por cierto. ¡Enhorabuena!

    ResponderEliminar
  29. muuuuuuchas gracias!!!!
    soy muy nueva en el mundo bloguero!! así que me has ido de perlas.
    merci!

    ResponderEliminar
  30. Super útil! Voy a peobarlo! Gracias

    ResponderEliminar
  31. OMG, Laura llevo todo el verano dandole vueltas para instalar los botones y contigo lo he logrado en 5 minutos. GRACIAS!!!

    ResponderEliminar
  32. Muchas gracias, me ha sido muy útil! ¿Habrá algún post sobre las plantillas?

    ResponderEliminar
  33. hola! estoy intentando añadir el icono de goodreads pero me es imposible. hago exactamente lo que dices, copio la imagen pero al pegarlo no me sale el icono sino "icono goodreads.jpg" le pongo url y sale tal cual así en el blog. luego la otra opcion de subirlo a una web tampoco me va bien porque el icono me sale demasiado grande, no me sale pequeño. sabes como ayudarme?

    ResponderEliminar

Gracias por tu comentario ♥
Thanks for your comment ♥