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.