Estilos diferentes según la etiqueta de la entrada

La pregunta concreta era ¿se pueden etiquetar posts desactualizados? Y la respuesta rápida es sí, claro, cualquier etiqueta es válida. Hasta ahí no hay problemas pero podemos hacer un poco más que eso, podemos crear alguna clase de advertencia visual que indique que cierta entrada es vieja y su contenido debería ser tomado como una referencia dudosa ya que muchas cosas pueden haber cambaido desde que fue escrita hasta el presente.

En realidad, lo mismo podemos hacer con cualquier post al que se le haya colocado una determinada etiqueta y queremos mostrarlo de una manera diferente al resto de las entradas.

Una forma de hace eso es buscar esta parte que es más o menos estandard y que solemos encontrarla en el footer de los posts

<span class='post-labels'>
  <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
      <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
  </b:if>
</span>

Eso que se encuentra entre <b:loop ... > y </b:loop> es un bucle. Blogger lee cada una de las etiquetas del post y crea el código HTML del enlace con sus nombres (data:label.name) separados por comas.

Entonces, dentro de ese bucle, podemos agregarle condiciones de cualquier tipo que detecten si el post está identificado con alguna etiqueta en particular:

<b:if cond='data:label.name = &quot;nombre_etiqueta&quot;'>
  ... aquí hacemos algo ...
</b:if>

Para que este sistema funcione bien, debo identificar a los posts uno por uno mediante unatributo ID así que, en este ejemplo, he buscado esto:

<div class='post-body entry-content'>

Y lo he cambiado por esto:

<div class='post-body entry-content' expr:id='data:post.id'>

No importa mucho si la clase tiene otro nombre, sólo importa agregar eso resaltado que no hará otra cosa que identificar el contendio de cada entrada usando el número único que le otorga Blogger.

Supongamos entonces que a ciertas entradas les agrego la etiqueta desactualizado y quiero que esas entradas se muestren con un estilo diferenciado. Usaré un script y un CSS especial para marcarlos. Por ejemplo, crearé una clase llamada postViejo y colocaré lo siguiente antes de </head>:

<style type='text/css'>
/* coloco propiedades específicas para esos posts */
.postViejo {
  background: transparent url(URL_imagen) no-repeat 50% 50%;
  color: #678;
  font-size: 14px;
  line-height: 1.4em;
  padding: 70px 20px;
}
</style>

<script type='text/javascript'>
//<![CDATA[
  function postsViejos(cual) { document.getElementById(cual).className='postViejo'; }
//]]>
</script>

Ya tengo un estilo especial y una función que escribirá el atributo class en una etiqueta determianda; ahora, faltaría llamar a la función así que le agrego el condicional al bucle citado al principio:

<span class='post-labels'>
  <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
      <b:if cond='data:label.name == &quot;desactualizado&quot;'>
        <script type='text/javascript'> postsViejos(&#39;<data:post.id/>&#39;) </script>
      </b:if>
      <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
  </b:if>
</span>

Lo mismo podría hacerse con cualquier otra etiqueta. Por ejemplo, si uso una etiqueta llamada imagen, podría agregarle algo similar. Necesitaría otra clase CSS que añadiré al estilo anterior y que puede ser todo lo compleja que se quiera:

.postImagen {
  -moz-border-radius: 10px;
  -moz-box-shadow: inset 10px 10px 25px #432, inset -10px -10px 25px #432;
  background-color: #101921;
  margin: 70px auto;
  padding: 40px;0;
  text-align: center;
  width: 450px;
}
.postImagen img {
  -moz-border-radius: 10px;
  -moz-box-shadow: inset 10px 10px 25px #765, inset -10px -10px 25px #765;
  border: none !important;
  padding: 20px !important;
}

Y también otra función que coloco dentro de la misma etiqueta script:

function postsImagenes(cual) {
  document.getElementById(cual).className='postImagen';
}

Y el bucle ahora tendrá otra condición más:

<span class='post-labels'>
  <b:if cond='data:post.labels'>
    <data:postLabelsLabel/>
    <b:loop values='data:post.labels' var='label'>
      <a expr:href='data:label.url' rel='tag'><data:label.name/></a>
      <b:if cond='data:label.name == &quot;desactualizado&quot;'>
        <script type='text/javascript'> postsViejos(&#39;<data:post.id/>&#39;) </script>
      </b:if>
      <b:if cond='data:label.name == &quot;imagen&quot;'>
        <script type='text/javascript'> postsImagenes(&#39;<data:post.id/>&#39;) </script>
      </b:if>
      <b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
    </b:loop>
  </b:if>
</span>

Ambos ejemplos pueden verse online en este blog de pruebas.