Sustitución de tags por imágenes

El fenómeno de los blogs está cada vez más de moda. De comenzar sus pasos siendo una especie de diarios personales donde primaba una estética más textual, su diversificación en los últimos años ha sido impresionante.

Con una increíble variedad de temáticas, configuraciones y estilos, el fenómeno blog ha calado en la mayoría de los “estamentos”. Las empresas y los medios de comunicación de todo el mundo ya se sirven de ellos como otra forma de dirigirse a sus públicos internos y externos, lo que ha generado se dé a la estética de éstos cada vez más importancia.

Mientras algunos blogs subsisten en su apariencia más primigenia, con componentes en su mayoría textuales, otros han surgido más centrados en la imagen. Es algo que debería tenerse en cuenta a la hora de plantearse la creación de uno de estos espacios.

Si las preferencias se mueven más por los derroteros de la segunda opción quizá interese eliminar algunos elementos de texto por imágenes. Un ejemplo podrían ser las etiquetas, necesarias para organizar los contenidos, pero que pueden quedar sustituidas por algunos gráficos que identifiquen claramente el tag y que contribuyan a hacer más atractivo el blog.

Si finalmente se ha tomado la decisión de conseguir unas etiquetas más “visuales” lo primero que se debería pensar es dónde alojar las imágenes que se usarán. Subirlas a Blogger no es recomendable porque las direcciones URL que crea el portal de blogs son demasiado enrevesadas.

Es muy importante tenerlas localizadas, para lo cual ayuda mucho como forma de organización que se pueden tener dominios casi idénticos donde solo cambie el nombre de la imagen. Hay varios servicios que permiten establecer una dirección fija como Photobucket, Goggle Pages o Hostfile y que podrían resultar útiles para esto.

Deberían plantearse algunos estándares de uniformización de las imágenes, estableciendo un determinados formato y tamaño para éstas, con el fin que a la hora de insertarlas en el blog no haya ningún problema y creen una composición armónica. Lo mejor en estos casos para no perderse es que el nombre de la imagen sea exactamente igual al de la etiqueta que va a sustituir.

En Blogger suele haber dos lugares donde se muestran las listas con las etiqueta: uno es debajo de cada post y el otro a través de Etiquetas en la sidebar, header o footer. Vamos a centrarnos en este último.

Blogger permite agregar varios elementos Etiquetas así que, si ya uno creado no hace falta proceder a su supresión, en todo caso, esa sería una decisión posterior. Hay que ir a la Plantilla y en Elementos de la página, agregar el elemento y establecer la configuración deseada. Tras guardar los cambios el siguiente paso es dirigirse a Edición HTML y marcar Expandir artilugios.

Una vez hecho esto se debe buscar el código de ese elemento recién agregado en la encriptación html. Es posible apreciar que en esta modalidad las etiquetas se muestran en una lista. Hay unas líneas entre medias que, dependiendo de cómo se quieran mostrar las etiquetas, en principio, se podrían eliminar o darles una clase para luego poder manipularlas con CSS:

.sidebar ul.listaetiquetas {

… propiedades …

}

.sidebar li.etiquetaimagen {

… propiedades …

}

Éste sería el paso fundamental del proceso y el que definirá la apariencia final del blog. Para sustituir cada imagen por el texto de la etiqueta se puede aprovechar una facilidad de Blogger, crear una expresión:

Esto se encuentra en dos líneas diferentes. Hay que cambiar ambas pero reemplazar http://nuestro_servidor por la dirección del servidor donde esté alojada la imagen y ext por la extensión del tipo de archivo que se está usando. También es posible eliminar ahora el contador. El código quedaría así:

Hasta ahora se ha visto cómo llevar a cabo la eliminación de las etiquetas en el footer, pero, como se comentaba, Blogger también sitúa éstas en la parte inferior de cada post o entrada. Esto se puede encontrar en:

El código html de esta parte será muy parecido al del otro tipo de etiquetas pero, no es una lista HTML sino que se escriben una al lado de la otra, por lo que hay que eliminar el carácter separador (la coma) y, nuevamente, eliminar el texto por la imagen:

*

En este caso, es posible incluso crear una variante, utilizando una imagen personalizada y además, el texto, uno al lado del otro:

*