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

1 comentario:

Anónimo

excelente blog me ayuda bastante

» Escribe tu comentario aquí:


Si quieres hacer alguna consulta sobre tu blog habilita tu perfil o deja un enlace a tu blog:
<a href="url-de-la-página">Texto enlace</a>

» O utiliza el antiguo formulario


Los comentarios están siendo moderados y publicados lo antes posible.



jesgo23 ©2008/2009 | Plantilla Blogger | Diseño jesgo Creative Commons License