Añadir una marca distinta a cada entrada según su etiqueta. Blogger

Esto va especial pero no exclusivamente, para los que tengan algún tipo de sumarios montado en su blog. Lo que haremos hoy será poner algún tipo de marca o distintivo en cada entrada, de manera que a simple vista se puedan distinguir las que corresponden a cada etiqueta.

También podremos marcar sólo los de ciertas etiquetas y hacer este sistema extensivo para todo tipo de páginas o bien sólo mostrarlos en las de cierto tipo.

Pondré sólo un par de ejemplos, pero las posibilidades son muchas si le echáis imaginación... como siempre.


En la captura de abajo podéis ver cómo se marcaron automáticamente con este sistema, las entradas de otro blog en el que soy editor y en el que quería que los posts de una determinara etiqueta mostraran un dibujo de una estrella en la esquina, indicando así que se trataba de entradas redactadas por colaboradores externos.

El truco consiste básicamente en añadir una caja con una clase cuyo nombre será igual al de la etiqueta(s) del post. Esa caja irá anidada dentro de la que lleva la clase post y justo como primer hijo. Ahí podremos añadir el contenido que queramos: una cadena de caracteres, un símbolo, un icono, etc... directamente en HTML o bien con CSS mediante content.

En ambos casos, el hecho de que lleve una clase con el nombre de la etiqueta nos permitirá controlar su aspecto desde CSS, asignando las propiedades oportunas a dicha clase (.nombre_etiqueta).


Lo que sigue es lo que habrá que modificar en nuestra plantilla para conseguirlo.

Instalar librería jQuery

Por simplificar la cosa usaré un poco de JavaScript apoyado en la librería jQuery, así que ya sabéis que hay que tener entre las etiquetas head alguna línea como esta. No importa en un principio la versión que utilicéis, pero aquí he usado el directorio 1 para que se cargue automáticamente la última de esa serie:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>

Identificar la caja de cada entrada con el número interno del post

Como nos hará falta localizar a qué entrada queremos ponerle cada marca, en el div con clase post, será al que le añadiremos el dato. Lo podéis encontrar con alguno de los dos formatos que reproduzco, aunque creo recordar que la segunda clase hentry la incluyen todas las plantillas:

<div class='post hentry'>
...
<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'>
...

Sea como fuere, aquí es dónde hay que añadir una data que es la que guarda en Blogger el número que la plataforma asigna a cada entrada. Es uno que tiene algo más de 20 dígitos y que en el fuente de cualquier blog podréis encontrar dentro de un <a name="XXXXXXXXXXXXX"/>

Por tanto, lo que hay que insertar es lo siguiente (marcado en verde) y con ello diferenciaremos con una id distinta cada entrada.

<div class='post hentry' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting' expr:id='data:post.id'>

Añadir una caja con clase igual al nombre de la etiqueta

Esta es la idea principal de todo este truco. Lo que haremos será tomar las etiquetas del bucle (loop) que las genera y a continuación añadir una caja adicional con clase igual a esos nombres.

Para esto tendremos que localizar (seguimos en la edición de plantilla) el siguiente código. Si lo tenéis algo distinto no importa siempre que lleve el loop tal cual lo veis aquí. Si lo encontráis dos veces, la primero normalmente es para la plantilla para móviles, así que el segundo será el correcto.

<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>
</b:loop>
</b:if>
</span>

Bien, pues en ese bucle es dónde insertamos el script que genera la nueva caja. Sería la parte marcada en verde:  Para simplificar esta explicación inicial sólo vamos a tomar una etiqueta, la última de todas las que pudiera llevar la entrada y de ahí esa condición con data:label.isLast:

<span class='post-labels'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'>
<data:label.name/>
</a>

<!-- MARCA POR ETIQUETA -->
<b:if cond='data:label.isLast'>
<script>$(&quot;#<data:post.id/>&quot;).prepend(&quot;&lt;div class='marca <data:label.name/>'&gt;★&lt;/div&gt;&quot;);</script>
</b:if>

</b:loop>
</b:if>
</span>

Esto está así de raro para que Blogger lo interprete bien, pero en esencia es esto...

$("#ID_ENTRADA").prepend("<div class='NOMBRE_ETIQUETA'>★</div>");

...y lo que hace es buscar la caja con id igual a la especificada (la del post cuyas entradas se están leyendo en ese momento) e insertar (.prepend()) justo a continuación de su apertura, otra caja con clase igual al nombre de la etiqueta y el símbolo de una estrella como contenido.

Lo traduzco. Lo que hace ese código es transformar automáticamente esto:

<div class="post hentry">
<a name="3375743424375817014"></a>
<h3 class="post-title entry-title"></h3>

...en esto, siendo Jack la etiqueta que lleva esa entrada:

<div class="post hentry" id="3375743424375817014">
<div class="marca Jack"></div>
<a name="3375743424375817014"></a>
<h3 class="post-title entry-title"></h3>

Podríamos replicar directamente el loop completo con un simple document.write o incluso usando sólo HTML y las data de Blogger, justo debajo de la apertura de post y así ahorrarnos el jQuery y el uso de prepend, pero es que el ese bucle tarda un poco en ejecutarse y así no lo duplicamos.

Y ojo, que si no tenemos las etiquetas habilitadas o están dentro de una condición para que no se ejecuten en cierto tipo de páginas, en esos casos no funcionará tampoco esto porque precisamente así lo hemos indicado. Si no se quieren mostrar deliberadamente, sí que habrá que poner todo (bucle inclusive) justo detrás de la apertura del <div class='post...

Dando estilo con CSS

Pues así tal cual, ya tendremos una estrella en cada entrada, pero está será del mismo color que la fuente de las etiquetas para todos y además nos quedará al principio de cada post -arriba a la izquierda- en un lugar que seguro que no es el que nos gustaría. Y para arreglar eso ya tendremos que añadir algo de CSS a nuestra plantilla.

Lo primero es tener la clase post con posicionamiento relativo, así que si nuestra plantilla no tiene ya esa característica, la añadimos.

.post {position: relative;}

Y ahora ya reubicamos la caja con la estrella posicionándola de manera absoluta, con lo que nos quedará solapada sobre el cuerpo de las entradas en la parte superior izquierda. Una vez allí la movemos al gusto con top, bottom, left y/o right.

Para los estilos comunes usermos el selector .marca que antes añadimos automáticamente y de manera adicional, ya le añadimos un color diferente, un borde o lo que se nos ocurra, en función de la etiqueta que tenga asignada, usando el selector del nombre de la etiqueta.


Suponiendo por ejemplo las etiquetas "Jack", "Lewis" y "Frank", podría ser algo así:

.marca {position: absolute;top: 0px;right: 0px;font-size: 30px;line-height: 30px;color: green;border: 2px solid black;background: white;border-radius: 50%;}
.Jack {color:red;}
.Lewis {color:blue;}
.Frank {color:purple;}

En este blog de pruebas usé esas mismas propiedades con esas etiquetas y podéis comprobar como las estrellas tienen el color que asignamos a cada una de ellas. El resto salen verdes.

Ojo con las etiquetas que incluyen espacios, porque para el selector habrá que escoger sólo una de las palabras que use la etiqueta, teniendo cuidado de que esa palabra no se use en otra etiqueta. Por ejemplo, mi etiqueta "Jack London" lo que hace es meter dos clases, por lo que el div se quedaría así:

<div class="marca Jack London"></div>

Elegí "Jack" para el ejemplo, pero bien podría haber escogido como selector la segunda parte, "London". Eso sí, siempre que por ejemplo no hubiera otra etiqueta del tipo "Travel London", porque entonces la coincidencia de la palabra "London" haría que fuera del mismo color que la de "Jack London".

Lo anterior de que cuando las etiquetas incluyen espacios se nos complica la vida, es una bobada. Todos tenemos un momento tonto, lo siento.

Como bien me recuerda +Don Kseso en un comentario por G+, entre otros métodos se puede perfectamente usar el selector con clases múltiples (.Jack.London {...}) y solucionamos el problema de manera fácil.

Opción: Marcar sólo posts de una etiqueta concreta

Para esto sólo tendremos que añadir una condición de manera que el script sólo se ejecute cuando la etiqueta sea la deseada. En ese caso ya no nos haría falta la otra condición que nos limitaba a la última. Por ejemplo para marcar sólo las de la etiqueta "Jack", el código sería:

<!-- MARCA POR ETIQUETA -->
<b:if cond='data:label.name == "Jack"'>
<script>$(&quot;#<data:post.id/>&quot;).prepend(&quot;&lt;div class='marca <data:label.name/>'&gt;★&lt;/div&gt;&quot;);</script>
</b:if>

Opción: Sólo mostrar entradas en portada y páginas de navegación

De similar manera, añadimos una condición para que el script sólo se ejecute cuando estemos en ese tipo de páginas:

<!-- MARCA POR ETIQUETA -->
<b:if cond='data:blog.pageType == "index"'>
<b:if cond='data:label.isLast'>
<script>$(&quot;#<data:post.id/>&quot;).prepend(&quot;&lt;div class='marca <data:label.name/>'&gt;★&lt;/div&gt;&quot;);</script>
</b:if>
</b:if>

Cosas pendientes

Como esta entrada ya me ha quedado bastante larga, dejo sin tocar la casuística de mostrar tantas marcas por entrada como etiquetas tenga la misma, así como la posibilidad de que cada etiqueta lleve no sólo un color diferente, sino incluso un símbolo o icono diferente.

Para los que tengan ganas de currar, en el primer caso habría que cambiar el tema del posicionamiento absoluto para que no se solaparan los iconos uno encima de otro, cambiando los valores de right según el selector de cada etiqueta, o bien añadiéndoles un float o un inline-block.

Para el asunto de los diferentes símbolos ya habría que dejar vacía de contenido (quitar la estrella) la caja que insertamos con prepend y añadir el símbolo con :before o :after atacando directamente el selector correspondiente al nombre de cada etiqueta.

Nota publicitaria: En el blog cuya captura mostré al principio estamos de aniversario, así que a ver si os pasáis por allí :)

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir

Twitter

Pinterest

Facebook

Linkedin

Copy URL

Compartir

Twitter

Pinterest

Facebook

Linkedin

Y muchos más artículos interesantes si nos sigues en...

• Google
• Facebook
• Twitter