Cómo poner iconos de redes sociales en sidebar (Blogger)

tutorial iconos redes sociales sidebar blogger twitter facebook

La entrada de hoy es un sencillo tutorial para poder colocar en nuestra sidebar (o barra lateral), los iconos de las redes sociales que usamos habitualmente, para que así sea más fácil para nuestros seguidores estar en contacto con nosotras/os.

En realidad no es nada complicado, e incluso el código que os voy a poner podría valer para cualquier imagen que queráis añadir en un gadget de HTML.

Lo primero que deberemos hacer es tener los iconos que queramos colocar subidos a un hosting de imágenes, tipo imageshack o el mismo picasa. Intentad que todos los iconos tengan el mismo tamaño base, ya que sino quedarán unos más grandes que otros. De todas formas, en el código os dejaré un parámetro de X pixeles para que podáis cambiarlo fácilmente y sin tener que redimensionar las imágenes mediante un editor. Si no tenéis iconos, buscad en Google "social media icons", por ejemplo, que hay para aburrir!!

Cuando ya tengamos las imágenes subidas al servidor, nos metemos en el escritorio de blogger y accedemos al apartado "diseño" del blog, añadimos un nuevo gadget y elegimos el de HTML/Javascript


Dentro de éste, escribiremos el título del gadget (si queremos que lo tenga) y añadiremos el siguiente código para añadir nuestro primer icono. En este caso empezaremos con Facebook, pero puede ser cualquiera
<a href='URL PAGINA FACEBOOK' target='_blank'><img src='URL IMAGEN ICONO FACEBOOK' width= '48px' title='FACEBOOK' /></a>
Os he marcado en morado dónde tenéis que poner la URL de la página a la que queréis que vaya al hacer clic en el icono (en este caso de la Facebook), y la URL de la imagen del icono que queréis poner. Solo debéis sustituirlas por las que correspondan.

En rojo véis marcado el tamaño de la imagen, en este caso 48 pixeles. Lo podéis cambiar para que sean más grandes o pequeños a vuestro gusto.

En azul está marcado el título, que no es necesario ponerlo, pero cuando pongamos varios códigos, así sabremos cuál es cuál fácilmente.

Una vez hayáis rellenado el código y lo guardéis, deberá salir el primer icono. Para poner más, sólo deberéis copiar el mismo código a continuación del primero y rellenarlo con la siguiente red social que queráis añadir.

Notas:
  • Si queréis que os queden centrados, poned antes del primer código <center> y al final del último código </center>. Ésto hará que queden centrados en la sidebar, en vez de a un lado.
  • Si ponéis muchos iconos, es posible que no os quepan todos en una sola línea (depende del tamaño de éstos y del ancho de la sidebar)
  • Si queréis poner un icono del e-mail, donde tengáis que poner la URL del email, tenéis que ponerlo así 'mailto:fulanito@mimail.com'

Y eso es todo. Espero que os haya servido a las que queráis hacerlo. Sé que muchas sabéis, pero hago este tipo de post porque alguna me los ha pedido. Yo no soy entendida en estos temas, siempre os digo que busco la información por google. Si queréis aprender sobre estos temas, os recomiendo seguir blogs como el de Mama quiero ser blogger, donde aprenderéis muchísimo.

Que tengáis buen día, y no os peguéis mucho con el HTML :P

Sígueme en
Imagen | 17thAvenueDesigns

20 comentarios

  1. Ya sabes que este tipo de post me encantan por lo prácticos que son, mil gracias por enseñarnos tantas cositas! BESOS!

    ResponderEliminar
  2. Fantástico guapa, a mi la única pega es que con lo del email sale el dichoso outlook.

    Un besote!

    ResponderEliminar
    Respuestas
    1. Es que sale el programa que tengas predeterminado en windows. Yo tengo el windows live mail, y es el que me abre ^^ Besotes!

      Eliminar
  3. Gracias por el tutorial, nos vendrá bien a más de una.
    Besos!

    ResponderEliminar
  4. Muchas gracias por la info!
    Un besito.

    ResponderEliminar
  5. Muy buen tutorial me lo apunto! haber si me sale besitos

    ResponderEliminar
  6. Yo cambié los iconitos el otro día, pero ya los tenía puestos de antes en tamaño más grande y con otros iconos totalmente distintos, la verdad es que quedan genial :)
    Un besote!!

    ResponderEliminar
  7. Gracias por los truquis, a ver si me pongo y le hago un lavado de cara al blog, este tutorial me viene genial para la idea que tenía. 1 besazo guapi

    ResponderEliminar
  8. Genial el post pero aún así de sencillo y claro, tengo problemillas ;) Hay algo que no hago bien con el almacenamiento de la imagen porque en vez del icono de facebook-que es el que he usado- aparece un cuadrado con un interrogante dentro. La imagen la cuelgo en dropbox dentro de una carpeta. Ideas, sugerencias,...? Gracias!

    ResponderEliminar
    Respuestas
    1. hola maría!
      Quizá dropbox no sea el sitio adecuado. Yo nunca lo he usado, pero ahí se ven las imágenes, o ves el archivo? Tienes que subirlo a un servidor de imágenes y coger el link directo, prueba con http://imageshack.us/ o http://photobucket.com/ que son los más usados, también creo que puede servir http://www.flickr.com/ . Yo uso el primero de los que te he comentado. En todos ellos subes una imagen y ésta se ve en el navegador como tal,... por eso creo quizá en dropbox no valga.

      Ya me cuentas si te sale.
      Un besote

      Eliminar
    2. A mi me pasa lo mismo que a María, me sale una imagen genérica, como que la imagen no funcionase. Lo he subido por Imageshack. Gracias!!

      Eliminar
  9. Guapa no te conocía! gracias porlos tutoriales me vienen geniall me ha costado pero lo he conseguido jiji

    un beso me quedo a seguirte!

    www.yoyomismaeirene.com

    ResponderEliminar
  10. Muchas gracias por la ayuda, he hecho esto mil veces y siempre se me olvida. Genialmente explicado, a ver si esta vez se me queda :)

    ResponderEliminar
  11. ohhh me ha sido de gran ayuda, llevaba tiempo queriendo poner las redes sociales y no me quedaban bien, con esto me ha quedado perfecto!

    http://uvedeveronica.blogspot.com.es/

    ResponderEliminar
  12. Hola, gracias por el tutorial. Todo me sale genial pero a la hora de enlazar desde mi blog con las redes sociales sólo me deja hacerlo con Facebook, el resto no enlaza. Que hago mal? te dejo url del blog para que lo veas, gracias.

    http://mementovivere14.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Ya lo conseguí, después de mucho darle vueltas, mil gracias!!! Saludos!!!

      Eliminar
  13. Menos mal que encontré este tutorial! Ya me estaba dando la cabeza contra la pared de frustración.

    ResponderEliminar
    Respuestas
    1. Hola Mics! Me alegro de que te haya servido el tutorial.. bueno, me alegro yo y seguro que la pared ;) Un beso!

      Eliminar


¡NO SPAM! Por favor, no dejes direcciones web en los comentarios, sino serán eliminados ¡GRACIAS!

➡ Usa lenguaje apropiado: no se permiten insultos, discriminación, etc...

Con la tecnología de Blogger.