Blogger y los comentarios (1)

La idea de mostrar con cierto detalle el código que utiliza Blogger para los comentarios era poder internarnos en una de las secciones de la plantilla a la que no le damos mucha importancia y que es, sin duda, una de las más utilizadas de cualquier blog.

Esta serie de hacks tendrá tres finalidades:

1. lograr que los comentarios se destaquen unos de otros modificando los colores del fondo
2. numerarlos
3. agregar alguna clase de ícono o establecer alguna propiedad que permita diferenciar los comentarios hechos por nosotros de los hechos por un visitante y, eventualmente, identificarlos individualmente

Todo esto, podemos hacerlo con cierta sencillez y sin agregar scripts estrafalarios.

Por ejemplo, para conseguir que los comentarios posean colores de fondo alternados, debemos numerarlos, de esta manera, los pares tendrán una propiedad y los impares otra. Empecemos por ahí.

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

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

Estas son las secciones del código que debemos manipular:

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

Nada del otro mundo, todo lo que hacemos es "contar" los comentarios a medida que Blogger los va mostrando, guardamos ese dato y lo mostramos. Ese contador es el que usaremos para cambiar el color de fondo de cada uno.

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:

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

/* 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: 10px 0px; /* separación entre comentarios */
  padding: 5px 20px 0px; /* margenes internos */
  /* el color de fondo, los bordes. etc */
  background-color: #1E252D;
  border-bottom: 1px solid #445566;
  border-top: 1px solid #445566;
}

.comentarioImpar { /* los comentarios impares */
  margin: 10px 0px; /* separación entre comentarios */
  padding: 5px 20px 0px; /* margenes internos */
  /* el color de fondo, los bordes. etc */
  background-color: #2E353D;
  border-bottom: 1px solid #445566;
  border-top: 1px solid #445566;
}
</style>

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

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

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