Añadir una marca distinta a cada entrada según su etiqueta. Blogger | Oloblogger Esto va especial pero no exclusivamente, para los que tengan algún tipo de sumarios montado en su bl...

25 de enero de 2014

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.

Marcas sólo en las entradas con cierta etiqueta



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.

Etiqueta Jack London >> Marca roja (Jack)

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
Copy URL

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

follow us in feedly

22 comentarios :

  1. Oloman como andas, disculpa q escriba en este post algo q no tiene nada q ver pero no sabia donde poner la consulta, te comento que tengo el dominio .com y .com.ar de mi pagina y quisiera saber si hay forma de que los 2 funcionen con un unico blog
    desde ya muchas gracias
    saludos

    ResponderEliminar
    Respuestas
    1. Hola. Uno de ellos lo tienes que asignar a tu blog y para que el otro funcione "como si fuera un único blog", tendrás que redirigirlo desde tu servidor de dominios.
      Por ejemplo, pon el .com en tu blog y luego desde el servidor de dominios creas una redirección automática para que cuando alguien teclee .com.ar, le lleve al .com.
      No conozco otra manera.

      Eliminar
    2. muchas gracias Oloman!!! abzo y gracias por la info

      Eliminar
  2. Muy interesante como es de costumbre en Oloblogger.
    Está excelente musicaememorandum.
    Saludos

    ResponderEliminar
    Respuestas
    1. Gracias Miguel por molestarte en mirarlo ;)

      Eliminar
  3. Hola amigo, esto me interesa mucho para adaptarlo a mi blog de peliculas pero no lo entiendo...

    Mi blog tiene las entradas en miniaturas donde solo muestra la portada de la pelicula en cuestion y lo que quiero es que si la etiqueta dice latino ponerle una imagen con forma de cinta o similar a las entradas que tengan esa etiqueta encima, lo mismo para las demas etiquetas, se entiende???

    ResponderEliminar
    Respuestas
    1. Bien, pues en ese caso sigue paso a paso esta entrada, porque eso es precisamente lo intenté explicar. En lugar de poner una estrella, tú pon otro tipo de marca.

      Eliminar
    2. sigo sin entender, pasa que en mi blog no encuentro nada del codigo mencionado amigo...

      Eliminar
    3. A ver... Un HEAD tienes seguro y un POST HENTRY también y esas dos cosas son las únicas cosas a localizar en tu plantilla. Lo demás lo tienes que añadir tú siguiendo esas referencias.

      Eliminar
  4. Hola CAMPEÓN..... Cómo puedo poner las imágenes de los lectores que comentan en mi blog en forma de circulo, como la tienes tu.
    GRACIAS.....

    ResponderEliminar
    Respuestas
    1. Buscador de la izquierda > Comic ;)

      Eliminar
  5. Oloman, cómo podría aplicar esto mismo que explicas, pero para generar un CSS diferente a cada entrada según su etiqueta. ¿Es posible?

    Intuyo que es muy parecido a lo que explicas muy bien aquí, pero no me sale de ninguna forma.

    Es decir, por ejemplo que en una misma página del blog se vean varias entradas de etiquetas diferentes, y cada una tenga un color de fondo diferente, según su etiqueta...

    ResponderEliminar
    Respuestas
    1. Sí que es posible... bueno, yo también intuyo que lo es porque no he llegado a hacerlo nunca, pero precisamente por no haberlo desarrollado no te puedo explicar a ciencia cierta. Es de las múltiples cosas que tengo pendientes para probar y publicar si lo logro.

      Eliminar
  6. Hola Oloman, he buscado en tu blog y en varios más...y bueno he encontrado muchas cosas, las he intentado todas y pues me gustaria saber como puedo agregar la caja de comentarios de facebook al blog .... como te digo he intentado de todo y nada me resulta :( y he visto muchos blogs que tienen esto.

    http://elsecretodelabuenalectura.blogspot.com/ ojala puedas ayudarme

    ResponderEliminar
    Respuestas
    1. Yo nunca he instalado ese tipo de comentarios, por lo que no podría guiarte, pero Ciudad Blogger tiene este tutorial. A ver si con él tienes más suerte.

      Eliminar
  7. Buenas , disculpa, era para preguntar si había una forma de mostrar 2 etiquetas a la vez, a simple vista tal vez no le veas el sentido, solo es curiosidad

    ResponderEliminar
    Respuestas
    1. No entiendo muy bien lo que quieres hacer, pero este sistema "marca" las cajas de los posts con TODAS las etiquetas disponibles.

      Eliminar
  8. La forma en la que explicas los pasos es engorrosa :( lo intenté y no me salió, aún así gracias :)

    ResponderEliminar
    Respuestas
    1. Retiro lo dicho, comprendí mejor el código y funcionó muy bien, muchas gracias.

      Eliminar
    2. Me alegro de que pudieras hacerlo finalmente.
      El problema seguramente es que no me limito a daros las cosas para copiar y pegar, sino que me gusta explicarlas y además hacerlo de la forma más general posible, de manera que para otras cosas distintas podáis aplicar la base del truco.

      Eliminar
  9. Hola nuevamente, lo intenté... no encontré ninguno de los códigos guía que das en mi html, traté de añadirlos antes del fin de la etiqueta pero no supe cómo hacerlo funcionar. sería chevere poder tenerlo en mi blog e igual tampoco super en donde se ponía cada codigo... jajajaja me perdí un poco, pero volveré por más, no me voy a rendir, si me puedes dar una mano te lo agradezco.

    ResponderEliminar
    Respuestas
    1. Hola. En tu plantilla, la referencia que indico como
      <div class='post hentry'>
      ...es simplemente...
      <div class='post'>

      Lo demás tiene que ser igual.

      Eliminar