Jugando con los posts (Colores diferentes)

Hace ya varios días, Ariane preguntaba si era posible aplicar el mismo truco que permite mostrar los comentarios pares e impares con diferente color, a los posts de tal forma que se vean con fondos diferentes. Imaginé que sí y quedé en contestarle así que, trataré de cumplir.

Para quien no tenga implementada algunas de esas modificaciones, hay que aclarar que lo primero que debemos tener es identificados los posts de manera individual. Eso, puede hacerse agregando el atributo ID en ellos. Buscamos entonces en la plantilla algo así:

<div class='post-body entry-content' expr:id='"post-" + data:post.id'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Y le agregamos lo que se muestra en color aunque hay que tener en cuenta que el atributo class puede variar en algunas plantillas pero no tiene importancia; lo importante es agregarle el ID, sea cual fuera el nombre de la clase. Con eso, identificamos cada post de manera individual en las páginas que muestran varios.

Ahora, agregaremos el script y el estilo, justo antes de </head>:

<script type='text/javascript'>
//<![CDATA[
function ContarP(cual) {
var resto;
resto = contadorPosts % 2;
if (resto == 0)
document.getElementById(cual).className='entradaPar';
else
document.getElementById(cual).className='entradaImpar';
}
//]]>
</script>

<style>
.entradaImpar {background-color: #F0F8FF; padding: 10px;}
.entradaPar {background-color: #F0F0F9; padding: 10px;}
</style>

Y por supuesto, las propiedades de estilo son personales así que puede agregarse cualquier otra.

Por último agregaremos el contador y la llamada a la función y para eso, biuscaremos esta parte:

<b:includable id='main' var='top'>
.......
<script type='text/javascript'>var contadorPosts=0;</script> <!-- contador a cero -->
<b:loop values='data:posts' var='post'>
.......
<b:if cond='data:blog.pageType != "item"'>
<!-- no ejecutamos la función en las páginas individuales -->
<script type='text/javascript'>
contadorPosts=contadorPosts+1;
ContarP(&#39;post-<data:post.id/>&#39;);
</script>
</b:if>
</b:loop>
.......
</b:includable>

De esta manera, los posts se mostrarán con fondo de color intercalados salvo en las páginas individuales donde se seguirán mostrando con el esquema gráfico normal del blog.