ElMosquitero

Ayer me preguntaba k4cho en un comentario, cómo hacer para que los marcadores Sociales de la izquierda se quedaran así, tal cual los tengo yo en mi blog. La respuesta, aunque ya manida en otra entrada, la vuelvo a poner de nuevo a sabiendas de que siempre, las entradas antiguas, acaban quedando en el olvido más cruel e injusto que existe.

Antes que nada solo daros dos consejos:

1. Antes de hacer cualquier modificación en la plantilla del blog, debéis hacer una copia de seguridad de la misma. Para hacerlo solo copiad y pegadla, con la plantilla de artilugios expandida, utilizando vuestro blog de notas.
2. Las imágenes no tienen que ser de un ancho y alto superior a 20px. Es recomendable que todas las imágenes que utilicéis tengan el mismo tamaño, ello hará que no desentonen y le dará un toque algo más elegante que si colocáis una de cada medida.

Para que estos Marcadores Sociales, que no son más que simples botones que nos llevan a otros perfiles, herramientas y demás lugares en los que la gente pueda encontrar información sobre nosotros, queden tal cual los tengo yo en mi blog, debéis pegar todo este código justo antes del </body> que hay al final de vuestra plantilla.

<span style='display:scroll;position:fixed;bottom:50%;left:10px;'><a href='Enlace'><img src='URL de la Imagen'></img></a><div/></span>

Lo primero que debo decir, es que este ejemplo consta solo de una imagen. Para añadir más imágenes solo habrá que ir colocándolas antes del </span> con sus respectivos enlaces, tal cual así:

<span style='display:scroll;position:fixed;bottom:50%;left:10px;'><a href='Enlace'><img src='URL de la Imagen'></img></a><div/><a href='2º Enlace'><img src='2ª URL de la Imagen'></img></a><div/></span>

Al  hacerlo, incluid también el <div/>, puesto que ello provocará que la siguiente imagen quede colocada justo debajo de la anterior. Si lo que queréis es que estén todas una al lado de las otras, solo debéis utilizar el mismo código prescindiendo de los susodichos divs.

<span style='display:scroll;position:fixed;bottom:50%;left:10px;'><a href='Enlace'><img src='URL de la Imagen'></img></a><a href='2º Enlace'><img src='2ª URL de la Imagen'></img></a></span>

Ahora viene la explicación de cada una de las partes de este código:

• bottom:50%

Esto nos dice a qué altura de la pantalla quedarán nuestros marcadores. Está puesto en porcentaje solamente para hacer que siempre se vean igual. Pensemos que si lo ponemos en píxeles (bottom: 20px) obligamos siempre a dejar esos 20px de distancia entre la parte de abajo de la pantalla del visitante que nos deleita con su visita y la imagen. No habrá problema si el visitante tiene en su pantalla la misma resolución que nosotros, pero si por casualidad éste tiene una resolución diferente, la barra quedará desplazada hacia arriba o hacia abajo según sea ésta menor o mayor. Con la distancia en formato de porcentaje conseguimos unificar, aunque no del todo, donde verán todos las imágenes que deseemos dejar colocadas en el blog de forma permanente. Haced la prueba y veréis la diferencia.

• left:10px

Esta orden nos dirá en que  lado quedará nuestra columna de marcadores y la distancia de ésta sobre el lateral de la pantalla. En mi caso, para que la barra no se quede totalmente pegada al lateral, le he dado un margen de 10px. No lo he puesto en porcentaje porque creo que se complica demasiado. Probad vosotros y sabéis a qué me refiero. Si deseáis que la barra de marcadores quede colocada a la derecha, solo deberéis cambiar el “Left” por el “right”.

Y ya está, aquí tenéis explicado el secreto de mi barra de marcadores sociales.

Para los más avezados observadores diré que en la parte derecha están los RSS del blog con el mismo sistema. Una buena forma de que nuestros feeds queden siempre visibles en todo momento.