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

Hoy no tenemos receta, sino que os voy a explicar, paso a paso, cómo añadir los botones sociales a vuestros blogs. Este tutorial, en principio, es para Blogger. Pero también nos puede servir para Wordpress (de hecho, yo primero lo hice en Wordpress y me funcionó bien). De todas formas, si necesitáis un paso a paso para Wordpress, no dudéis en decírmelo y os lo haré.

Todos sabemos lo importantísimo que es vincular nuestro blog con las redes sociales más usadas, para darnos a conocer y captar lectores (y potenciales clientes, quien tenga esa finalidad). Cada red social te facilita la opción de añadir directamente el enlace de la misma en tu blog, sin que tengamos que rompernos la cabeza ni nada. El problema es que no quedan demasiado bonitos...

Y hacer una cosita un poco más mona tampoco es difícil, ni requiere grandes conocimientos de diseño ni de programación.

Yo os voy a contar dos formas de hacerlo: una muy simple y otra un pelín más elaborada (pero que voy a explicar paso a paso, para que nadie se pierda). Y vosotros ya elegís la que mejor os convenga.

Por cierto, 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.

OPCIÓN MEGA-SIMPLE


Con este método, vamos a tratar los botones como simples imágenes (en formato .jpg), como si fueran fotos.

Lo primero es diseñar nuestros botones. Para que queden bien de esta manera, lo mejor es que sean rectangulares y con un tamaño adecuado a nuestro ancho de columna. Por ejemplo, yo sé que mi ancho de columna es de 260 píxeles, por lo que he "diseñado" unos botones de 220x50 píxeles (220 de largo y 50 de alto).





Veis que es tan fácil como un rectángulo con esas medidas relleno de un color plano y con el nombre de cada red social en una letra simplita. Vosotros, por supuesto, os podéis currar el diseño todo lo que os apetezca, para adaptarlo a la estética de vuestro blog. Eso sí, cada botón es un archivo distinto. Y es importante definir las medidas del archivo a la hora de diseñarlo, porque luego no os va a dejar modificar el tamaño.

Una vez tenemos nuestros botoncitos, en el modo DISEÑO de Blogger, incluimos cada botón en un Gadget de Imagen, vinculando dicha imagen a nuestra página o perfil de la red correspondiente.

El resultado sería una cosa así:


Estos botones son perfectamente funcionales y, con un diseño bonito, pueden quedar muy bien en nuestro blog. Pero siempre quedarán uno debajo del otro: por eso es importante que sean rectangulares y de un tamaño adecuado a nuestro ancho de columna: para que la estética sea armoniosa y no "canten".

SEGUNDA OPCIÓN


Pero yo sé que queréis los botones redonditos que, pese a estar uno junto al otro, funcionen independientemente. ¿Verdad que sí?




Pues para esto necesitamos un código HTML y unas cositas más. Pero que nadie se me asuste, porque lo voy a explicar todo pasito a pasito.

Sin embargo, no os quiero aturrullar hoy. Para un día ya es bastante información: mañana os explicaré esta segunda forma de hacerlo. 

- Os dejo AQUÍ el vínculo con la segunda parte de este tutorial. -

¡Así que estad atentos!

Mientras tanto, podéis ir diseñando vuestros propios botones a vuestro gusto. La única condición es que, para este segundo método, es mejor que sean en formato .png y con el fondo transparente. ¡Ya mañana os contaré el motivo!

Tampoco deberíais descartar el primer método, ya que, con un buen diseño, los botones rectangulares pueden llamar la atención y ser un signo distintivo de vuestro blog. Y, como es taaaaaan fácil de hacer, podéis hacer la prueba.

Besitos y... ¡que no me falte nadie mañana!

2 comentarios:

  1. Justo estoy haciendo limpieza de mi blog y algunos cambios, estaba buscando algun tuto de esto, mil gracias me pongo manos a la obra a diseñar mis cuadritos! creo que lo haré con la opcion jpg, me la veo mas facil el htlm me da mieditoooo jijijiji. Bscosss

    ResponderEliminar
  2. tengo que darte mil y una gracias por haber hecho este post, de verdad este y el siguiente que ha sido el que yo he utilizado. Creo que me quedó genial! gracias gracias gracias

    itmoonvigo.blogspot.com.es

    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!