Cambiar el color del fondo de los post

  • julio 19, 2010
Cambiar el fondo de los post

Aqu?? dejo un peque??o tutorial para quien quiera cambiar el fondo de los post:

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 classpuede 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.

No Comments Found