Comentarios diferenciados con colores

Se trata de colorear los comentarios según si son pares o impares y también los propios del autor del blog.

El código que necesitamos modificar es el contenido en el bloque:

<b:includable id='comments' var='post'>
...
</b:includable>

Estas son las secciones del código que debemos manipular (añadimos la parte en azul):

<b:includable id='comments' var='post'>
...
<dl id='comments-block'>

<!-- ponemos el contador a cero -->
<script type='text/javascript'>var contadorComentarios=0;</script>

<b:loop values='data:post.comments' var='comment'>

<!-- agregamos un bloque para darle un nombre único a cada comentario -->
<div class='' expr:id='data:comment.id'>

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/> <!-- el texto "dijo..." -->

<!-- el código del contador -->
   <span class='comentacontador'>
      <a expr:href='"#comment-" + data:comment.id' title='Vinculo al comentario'>
         <script type='text/javascript'>
            contadorComentarios=contadorComentarios+1;
            document.write(contadorComentarios)
         </script>
      </a>
   </span>

</dt>

<dd class='comment-body'>
...
</dd>

<!-- establecemos la clase del comentario -->
<script type='text/javascript'>
   ContarC('<data:comment.id/>')
</script>

</div>

</b:loop>
</dl>
...
</div>
</b:includable>

Ahora, agregaremos las propiedades de estilo antes de la etiqueta </head>. Estas, podrán ser muchas y muy variadas, dependiendo de cada plantilla. En mi caso, el código es el siguiente:

<!-- numerar los comentarios  -->
<style type='text/css'>
.comentacontador {          
float: right;
display: block;
width: 50px;
margin-top: -25px;                   /* la posición de los números    */
text-align: right;                   /* el número a la derecha        */
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;                               /* el tipo de la fuente          */
font-weight: normal;font-size: 26px; /* el tipo y tamaño de la fuente */
}

/* como son enlaces, forzamos las propiedades de color */
.comentacontador a:link, .comentacontador a:visited {color: #445566 !important;}
.comentacontador a:hover, .comentacontador a:active {color: #FF9933 !important;}

/* propiedades para diferenciar pares e impares */
.comentarioPar {                  /* los comentarios PARES          */
margin: 5px 0px;                  /* separación entre comentarios   */
padding: 5px 10px 5px 10px;       /* margenes internos              */
background-color: #efeff7;        /* el color de fondo              */
border-bottom: 3px solid #AECAEB; /* los bordes                     */
border-top: 1px solid #445566;
}

.comentarioImpar {                /* los comentarios IMPARES        */
margin: 5px 0px;                  /* separación entre comentarios   */
padding: 5px 10px 5px 10px;       /* margenes internos              */
background-color: #efeff7;        /* el color de fondo              */
border-bottom: 3px solid #AECAEB; /* los bordes                     */
border-top: 1px solid #445566;
}

.comentarioPropio {               /* NUESTROS comentarios           */
margin: 5px 0px;                  /* separación entre comentarios   */
padding: 5px 10px 5px 10px;       /* margenes internos              */
background-color: #ffffcc;        /* el color de fondo              */
border-bottom: 3px solid #FFFF4A; /* los bordes                     */
border-top: 1px solid #445566;
}
</style>

Lo que nos falta es agregar el script que establecerá la clase (las propiedades) de cada comentario según sea par/impar o del autor. La agregamos inmediatamente después del estilo:

<script type='text/javascript'>
function ContarC(cual,quien) {
if (quien ==&#39;TU_NOMBRE&#39;) {
document.getElementById(cual).className=&#39;comentarioPropio&#39;
} else {
var resto;
resto = contadorComentarios % 2;
if (resto == 0)
document.getElementById(cual).className=&#39;comentarioPar&#39;
else
document.getElementById(cual).className=&#39;comentarioImpar&#39;
}
}
</script>

En TU_NOMBRE ponemos nuestro nombre.

El resultado, puede verse en el blog, abriendo cualquier post que contenga comentarios.

Visto en Vagabundia