Tutorial para añadir botones sociales a tu blog: segunda parte

Ayer, en la primera parte de este tutorial, veíamos que podemos tener unos botones rectangulares sin complicarnos para nada la existencia. Nos quedaría una cosa así:



Esto, con unos botones bonitos claro, puede ser una muy buena opción de tener en nuestro blog un toque distinto a los demás. Y, además, ¡es muy fácil!

Pero si lo que queremos es tener varios botones, uno junto al otro, y que funcionen individualmente, tendremos que dedicarle un poquito más de tiempo, ya que hemos de tocar código HTML


¡No os asustéis! Que os lo voy a explicar paso a paso, con capturas de pantalla, para que nadie se pierda.

Lo que os voy a explicar no me lo he inventado yo, sino que tengo que agradecérselo a Carmen, que ya lo explicaba en su blog La gallina pintadita, quien sigue las explicaciones que da Kira en Her new leaf. Lo que yo voy a hacer aquí es simplemente detallar más el método que ellas siguen para añadir los botones sociales. Cuando lo hagáis, ya veréis que es mucho más fácil de lo que parece.

PRIMER PASO: PHOTOBUCKET

Bueno, en realidad lo primero que tenemos que hacer es diseñar (o que nos diseñen) unos botones bonitos, que se adapten a la estética de nuestro blog. También los podemos buscar en internet: encontramos paquetes de botones sociales de descarga gratuita.

Muy importante: los botones han de tener unas medidas adecuadas a nuestro blog (porque luego no vamos a poder redimensionarlos). Los que pongo en el ejemplo son de 50x50 píxeles, para que os hagáis una idea.

Y deben estar en formato .png, con el fondo transparente. Nosotros podemos haberlos diseñado con fondo transparente, pero si los guardamos como .jpg, se genera automáticamente un fondo blanco (con lo que nos quedará un recuadro alrededor del botón). El formato .png es el único que nos va a conservar el fondo transparente.

Una vez tenemos listos nuestros botones, no los podemos añadir directamente. El código HTML que vamos a usar nos va a pedir la URL de cada botón (de cada archivo de imagen) para poder funcionar bien.

La URL es la dirección, el "rinconcito de Internet" en el que están guardada cada cosa, ya sea una página web, nuestro blog o, en este caso, los botoncitos. 

Como nosotros no podemos asignarle aleatoriamente una URL, ni Blogger nos va a dejar hacerlo, necesitamos usar un programa externo de almacenaje de imágenes que nos genere una URL para cada imagen. Y para esto nos va a servir Photobucket.

Tenemos que entrar en http://photobucket.com/ y registrarnos, para crear una cuenta. 

Una vez estemos dentro de nuestra cuenta, veremos esta pantalla, desde la que podremos subir las imágenes que queramos (en este caso, los botones en formato .png).




Cuando le damos a Upload, nos aparece esta pantalla:



Le damos a Browse Files, para elegir en tu ordenador los archivos de imagen que queremos subir. Yo he elegido el botón de Facebook, que sé que está en formato .png, con fondo transparente y tiene unas dimensiones de 50x50 píxeles.

Cuando se haya subido la imagen (tarda poquito) vemos esta pantalla.



Vamos a seleccionar View Library, para ver mis imágenes. Y vemos esta pantalla:



Ahora le doy a la imagen con la que quiero trabajar (en nuestro ejemplo, el botón de Facebook que acabamos de subir).


Cuando hemos entrado en el archivo de imagen que nos interesa, vemos que nos aparece un cuadro con distintos códigos. El que necesitamos es el que se llama Direct Link. Con hacer clic en el código, se copia solo.

El código que acabamos de copiar es la URL de la imagen, que luego podremos pegar en el código HTML que os voy a facilitar para que funcionen nuestros botones sociales.

Ya hemos terminado con Photobucket, pero no lo cerramos, porque vamos a necesitar copiar luego este código... ¡y tenemos que subir al programa todos los botones!

SEGUNDO PASO: BLOGGER


Ahora tenemos que irnos en Blogger a la pestaña Diseño de nuestro blog. Aquí, seleccionamos "Añadir un gadget".


Se nos va a abrir un cuadro, en el que hemos de seleccionar el tipo de Gadget que necesitamos, en este caso de HTML (lo que me va a permitir añadir código HTML en mi blog).



Ahora se nos abrirá el cuadro donde escribiremos nuestro código HTML.

El título lo dejamos en blanco.

En el cuadro de Contenido, por cada botón que queramos añadir, escribiremos:

<a href="URL del link" target="_blank"><img src="URL de la imagen"></a>
  • URL del link: a la página donde quiero que vaya cuando se pique en la imagen (en este caso, la dirección de mi página de Facebook).
  • URL de la imagen: el código que hemos copiado en Photobucket.
(Lo que está escrito en rojo y el subrayado es para que lo veáis bien: vosotros escribidlo todo en negro).

Si tenéis alguna duda con respecto a lo que es la URL y cómo averiguarla, podéis consultar este post, donde os lo explico al detalle.

Así, en este ejemplo, nos quedaría el código:

<a href="https://www.facebook.com/pages/A-m%C3%AD-no-me-gusta-cocinar/204220686372355?ref=hl" target="_blank">
<img src="http://i1295.photobucket.com/albums/b626/aminomegustacoc/botoacutenfacebook-1_zps0dc0c85d.png" /></a>


Si quiero añadir más botones, para que salgan juntos, voy pegando la misma secuencia de código (sin dejar espacios) todas las veces que necesite. Solo tendré que cambiar las URL del link y de la imagen en cada caso.

Así, para que salgan tres botones, el cuadro de código HTML quedaría así:
Ya sólo nos queda guardar, colocar el gadget en el lugar que queramos (en la pantalla de Diseño) y comprobar cómo ha quedado.
Y... ¡listo! 
Espero que os resulte útil este tutorial.

De la misma forma que hemos añadido los botones sociales, también podemos personalizar completamente nuestra barra de páginas. En este otro tutorial os explico cómo hacerlo.
La semana que viene volveré a la carga, con más recetas y puede que otras cositas. 
Besitos y... ¡hasta el próximo post!


11 comentarios:

  1. Me dejas sin palabras!!! Menudo tutorial! Gracias, gracias, gracias. Yo tengo muchos problemas con mi blog porque creo que el formato que elegí es un poco rarito y no me deja colocar nada por ahi. Un día me tengo que aventurar y cambiarlo "tó".
    Gracias de nuevo! Bien hecho!!
    Besitos

    ResponderEliminar
  2. Muchas gracias Carmen. Me guardo este tutorial en favoritos que estoy haciendo cambios en el blog y me viene de perlas, jejeee.

    ResponderEliminar
  3. Hola!! Este tutorial me viene de perlas! Me hago seguidora para no perderme nada y mañana hago cambios en mi blog! Mil gracias por compartir!

    Te ánimo a que pases por mi blog!

    Http://malagartesaniadefez.blogspot.com.es

    Besitoss

    ResponderEliminar
  4. Gracias de nuevo!! Acabo de poner los botones siguiendo, por fin! TU ESPECTACULAR TUTORIAL!!

    Gracias por compartir tu sabiduria!

    Besazos, Carmen y no te gastes mucho en el pareo que sin él, seguro que seguirás estando preciosa!!

    Mjsweettooth

    ResponderEliminar
  5. Muchas gracias por el tutorial!!! Muy útil!

    Ahora lo pondré en práctica :P

    ResponderEliminar
  6. Mil gracias por este tutorial, QUE BIEN EXPLICADO!!! No he conseguido que se coloquen en línea se ponen uno debajo de otro :(... seguire investigando. Muchas gracias !!!
    http://bebebicho.blogspot.com.es

    ResponderEliminar
    Respuestas
    1. Me paso por tu blog y te respondo... Besitos!!!

      Eliminar
    2. Fantástico tutorial!!! Ya llevaba consultados 3 o 4, pero no había manera y estaba a punto de desistir....Muchas gracias!
      http://teteriaonline.blogspot.com.es/

      Eliminar
  7. Acabo de seguir tu tutorial para incorporar unos botones bonitos a mi blog. Muchas gracias, es una maravilla lo bien que lo explicas. Un saludo.
    http://sacaelcucharon.blogspot.com.es/

    ResponderEliminar
  8. ¡Holaa! Te explicas de maravilla porque me ha servido para mucho en mi blog todo esto..Bueno encontré por ahí tu blog de casualidad y me he parado a leerlo y la verdad es que te lo estás trabajando muy bien. Soy nueva por aquí y espero poco a poco ir enterandome de todo, acabo de dejarlo con el amor de mi vida, y me han recomendado que escriba...y eso es lo que estoy pretendiendo trasmitir...mi día a día para superarlo. Aquí me tienes http://diariodeunadesenamorada.blogspot.com.es/ ¡GRACIAS!!!!

    ResponderEliminar
  9. Mejor explicado imposible!!!! Muchas gracias por el tutorial! Ya lo hice!
    Pensandovintage.blogspot.com

    ResponderEliminar

Muchas gracias por dejar tu comentario. Me encanta leerlos todos y me ayudan a mejorar este blog día a día... ¡Sin vosotros, esto sería muy aburrido!