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. Cuando lo hagáis, ya veréis que es mucho más fácil de lo que parece.

PRIMER PASO: CONSEGUIR LOS BOTONES SOCIALES

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.

En este blog os he dejado unos botones sociales de descarga gratuita, por si os apetece experimentar.

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.

SEGUNDO PASO: SUBIR LOS BOTONES A LA "NUBE"


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. 

EDITO ESTE POST EN SEPTIEMBRE DE 2021: cuando publiqué este post por primera vez, todo esto era un poco más enrevesado. Pero lo cierto es que en los ocho años que han pasado, el tener archivos en la nube se ha hecho algo muy habitual. Por ello, lo único que tenéis que hacer es guardar los archivos de los botoncitos en el servicio de almacenamiento en la nube que más os guste (Google Drive, Dropbox, One Drive,...). Así, se generará un enlace de acceso a cada archivo (su URL), que luego usaremos para que el botón se vea en el lugar deseado de nuestro blog.

IMPORTANTE: si cambiamos de ubicación el botón en nuestro servicio de almacenamiento en la nube, su URL también cambiará, con lo que hemos de estar pendientes de realizar las modificaciones pertinentes en nuestro blog, dado el caso, para que no nos dé fallos.

TERCER 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.
  • URL de la imagen: el enlace de acceso al archivo de imagen del botón.
(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:

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!


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

Publicar un comentario

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!