como_alinear_botones_redes_sociales_blog_html

Aviso a navegantes y criticantes: No, no soy informática ni pretendo serlo, tampoco tengo ningún título académico sobre el tema ni nada parecido, así que para las dudas que surjan a raíz de este post… no aseguro al 100% poder responderlas, si?
Lo que si tengo, y muchas,  son hormiguillas en el culo, y como lo que no sé lo aprendo… pues me siento más que capaz de poderte explicar como colocar en fila india los botones de las redes sociales en tu blog.
Tanto en blogger como en wordpress si.
Compartamos pues esta mini dosis de conocimiento para que todo el mundo pueda tener sus botoncicos monos y bien puestos! :)

Para empezar te digo que este post tiene un antecedente, en el que te explicaba cómo integrar tus botones de redes sociales en el blog, así que para no repetir contenido, te sugiero (que no obligo)  que leas primero este otro para saber subir imágenes y luego éste en el que te explico como alinearlas.
Ah, y además en este post que te digo, también puedes descargarte un set de botones completamente gratuitos y en varios tamaños!

Manos a la obra.

**(este post fue redactado antes del cambio de imagen y servidor de Superyuppies, por lo que en nada te darás cuenta de que la explicación y las imágenes no concuerdan con el aspecto actual del blog, sin embargo, la explicación sigue siendo exactamente igual de válida)

Me baso en mi propio blog, no por egocéntrica, sino porque es el mejor ejemplo que te puedo ofrecer (mi-yo-mi-yo), verás que a la derecha aparecen los 4 botones de redes sociales que tengo: facebook, twitter, pinterest y bueno, un botón de mail.
Y justo encima, el botón de suscripción asociado a mi cuenta de Mailchimp.
Vale, pues sabes qué? Que alinear botones es mucho más sencillo de lo que parece, sólo hay que saber cual es el código asociado a esto.
Para facilitarte la comprensión del proceso, verás que también te he descrito en forma de  mini glosario, los términos relacionados con este código. En posts posteriores iremos ampliando este glosario y enseñandote otras cosillas prácticas, ok? Genial!
Esta imagen es la que se corresponde al código html que te pego justo debajo.

Imagen 5

Imagen 12

Desglosemos ahora cada parte y diseccionemos este código:Imagen 7Imagen 8

Imagen 10

Y ya está!!! Que si, que es así de sencillo, sin trampa ni cartón!
Entonces, lo que puedes hacer es copiar este código que yo te he puesto arriba y pegarlo en un widget/gadget de texto. Cambia mis enlaces por los tuyos, y mis imágenes por las tuyas y ya lo tienes listo.
Dependiendo de tu plantilla tendrás más o menos espacio en la barra lateral, con lo cual, tendrás que ir jugando con el tamaño de la imagen (width) y también el orden y la cantidad de botones que quieras poner, obvio!
Pero en principio con esto, puedes tener en menos y nada, tus botones de redes sociales alineados en tu página. Guay verdad?
Pues por hoy, señoritas y caballeros, tenemos todo el pescado vendido!
En breve más y mejor (eso intentaremos) y si crees que el post puede resultarle útil a alguien que conozcas… ni dudes en compartirlo. Que el conocimiento está para eso, para repartirlo por el mundo! :))
Feliz semana,

Elia