lunes, 19 de julio de 2010

Cambiar el color del fondo de los post

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.

0 comentarios:

Publicar un comentario

DIRECTORIOS

http://www.trucosblogs.com/post
4.57/5 – 42 opiniones
http://www.fabricaturopa.com/post 4.57/5 – 42 opiniones