23 septiembre 2008

Numerando los comentarios (Otra forma)

A

nteriormente publique sobre como enumerar los comentarios, pero ahora traigo otra forma de colocar numeración a los comentarios y lo vi en Vagabundia, yo lo he probado y me ha parecido muy bueno, además te ayuda a diferenciar los comentarios con números pares e impares mediante el cambio de fondo, solo tememos que buscar esto códigos a continuación:

¡Recuerda! "GUARDAR SIEMPRE UNA COPIA DE TU PLANTILLA EN TU PC

Tenemos que expandir la plantilla en artilugios y buscaremos lo siguiente (Lo puedes buscar con CTRL+F):

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

Lo que tiene que hacer es ir colocándole todos los códigos que están en negrita y lo que no están son como la referencia de donde colocarlo.

Ahora agregaremos un estilo y un script donde se establece el conteo de los comentarios, esto lo agregaremos ante de </head>:

VER/CERRAR CÓDIGO

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


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

En la parte del estilo donde dice comentario par y comentario impar esta etiqueta background-color: es la que establece el color de fondo tanto de los comentarios de números pares e impares, es preferible que sean diferente los colores para que puedas ver la diferencia.
Andrés del blog Ayuda para el Blog, tiene una entrada parecida a este truco pero con el efecto hover.

Guardas los cambios y para ver el resultado, ve a una de las entradas que tenga comentarios y veras el truco implementado.

5 comentarios:

  1. Hola. Ya he visto que probaste lo del fondo para el título.
    Una vez que ves como funciona el tema, puedes probar a diseñar una imagen a tu gusto.
    Un saludo.

    ResponderEliminar
  2. Hola Oloman! Si, la he probado y me ha gustado como quedo, no la pude en los post porque no se ven el texto...

    Saludos y gracias

    ResponderEliminar
  3. Herramienta interesante para el blog. Es increible la cantidad de herramientas que salen para poder hacerlos más completos.
    Yo todavía no se como poner "ultimos comentarios" en el blog. Abrazos

    ResponderEliminar
  4. Hola Marisol! Hay muchas herramientas más, pero iré colocando una a una porque son muchas... Saludos!

    ResponderEliminar
  5. Hola Mery! Gracias por tu visita, muy buena la página web que me has recomendado, hay unos tips muy bueno, Saludos! Que vuelvas prontos...

    ResponderEliminar

¡Gracias por comentarme! No modero los comentarios porque me parece tentar contra la libertad de expresión de cada individuo, por eso le pido que no hacer comentarios con palabras obscenas, si vas a comentar como Anónimo por favor coloca tu nombre o cualquier apodo. ¡Gracias!