JMiur [E]

Aunque hace ya tiempo, en El escaparate de Rosa se mostraba la forma en que Blogger pagina los comentarios, son muchas las plantillas que no contienen los códigos necesarios y el tema sigue siendo motivo de consultas.

Si no utilizamos el sistema de avatares que es un agregado relativamente reciente, la forma de agregar el código faltante es el que muestra Rosa. En cambio, si utilizamos los avatares, el código es el mismo pero, la ubicación es levemente diferente.

En todos los casos, debemos buscar el includable correspondiente, expandiendo la plantilla y allí, agregaremos las líneas marcadas que son dos bloques idénticos ya que uno se muestra en la parte superior, antes del primer comentario y el otro en la parte inferior, luego del último.


<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>

<h4>
......................................
</h4>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'><data:post.oldestLinkText/></a>
&#160;
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'><data:post.olderLinkText/></a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'><data:post.newestLinkText/></a>
</span>
</b:if>


<div expr:class='data:post.postAuthorClass' expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
......................................
</div>

<b:if cond='data:post.commentPagingRequired'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
<data:post.oldestLinkText/>
</a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
<data:post.olderLinkText/>
</a>
&#160;
<data:post.commentRangeText/>
&#160;
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
<data:post.newerLinkText/>
</a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
<data:post.newestLinkText/>
</a>
</span>
</b:if>


<p class='comment-footer'>
......................................
</p>

</b:if>

<div id='backlinks-container'>
......................................
</div>
</div>
</b:includable>

Esta paginación es controlada pura y exclusivamente por Blogger mismo y se aplica sólo cuando hay más de 200 comentarios en una entrada.

Como todo lo que se agrega de modo automático, las posibilidades de personalización son pocas sin embargo, el código es editable y podemos modificarlo un poco. Para eso, debemos entender qué significa cada cosa y eso es bastante simple, sólo son cuatro enlaces de texto:


<data:post.oldestLinkText/> es el texto «El más antiguo
<data:post.olderLinkText/> es el texto ‹Más antiguo
<data:post.commentRangeText/> es el texto con la cantidad (por ejemplo 201 - 400 de 443)
<data:post.newerLinkText/> es el texto Más reciente›
<data:post.newestLinkText/> es el texto El más reciente»
&#160; es un caracter espacio

Como cualquier otro texto por defecto, podemos cambiarlos e incluso, colocar todo el SPAN dentro de un DIV para luego controlarlo con CSS:
<div class='paginacioncomentarios'>
<span class='paging-control-container'>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'> texto al primer comentario </a>
<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'> texto a la página anterior </a>
<data:post.commentRangeText/>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'> texto a la página siguiente </a>
<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'> texto al último comentario </a>
</span>
</div>
¿Podríamos usar una imagen? Sí, en lugar de poner el texto, colocamos una etiqueta IMG como lo haríamos con cualquier otro enlace.


Y por último, algo de CSS para modificar la parte gráfica:
.paginacioncomentarios { /* el div contenedor */
text-align: center;
}
.paging-control-container { /* sobrescribimos las propiedades por defecto de Blogger */
float: none !important;
font-family: Tahoma;
font-size: 12px;
margin: 0 !important;
}
.paging-control-container a { /* los enlaces */
margin: 0;
padding: 0 10px;
}
.paging-control-container a:hover {
/* cualquier propiedad */
}
.unneeded-paging-control {
/* si queremos que los enlaces que no se utilizan no se vean en absoluto, usamos display:none; */
}

31 comentarios:

Marcos Gabriel  

O mal do blogger é que agente não pode controlar todas as coisas como bem entender, coisas como paginação dos comentários deveria ser algo optativo assim como a auto paginação do blogger em relação as postagens .

A sua personalização ficou muito boa .
perdão caso eu n tenha visto,teria algum link para um DEMO?

Responder
Niño Gorila  

GRACIAS! PROBANDO!
http://harina-leudante.com.ar/
http://harina-leudante.com.ar/
http://harina-leudante.com.ar/

Responder
Felipe Calvo Cepeda  

Sabes... hace un tiempito largo tengo el truquito y nunca se me había ocurrido darle algunos estilos para ponerlo mas chevere :D

Ya me tendrás dedicandole un ratico a eso.. :)
Gracias.!

Responder
Joana Morais  

obrigada, era mesmo o que precisava :)

Responder
JMiur  

Marcos-Gabriel:
Coincido con todo eso. Paginar entradas y comentarios debería ser una opción normal. Puedes ver un ejemplo concreto en esta entrada

Felipe, Harina Leudante: Prueben, nomás.

Joana Morais: Me alegro que te sea útil.

Responder
Gem@  

Ohhh esto estaba pendiente.
Gracias :D

Responder
Marcos Gabriel  

Realmente, ficou muito bom a demonstração online..
11 de blogger,será que teremos alguma novidade?
Espero que seja na estilização da comment-form(se só abolir o iframe ficaria feliz) porque é realmente chato de comentar nisto .

Responder
Bonzu Pipinpadaloxicopolis III  

Nunca me ha gustado, es un numero bastante grande, si tan solo usara ajax sería más rápido.

Oye JMiur, conoces de alguna forma de hacer que un archivo css sólo se cargue cuando usen firefox?

Responder
JMiur  

Gem@.
Me acuerdo de ese detalle. Tal vez esto ayude :D

Marcos-Gabriel:
Ojalá sea cierto :D

Bonzu:
Más tarde habrá una entrada con alternativas para utlizar los comentarios condicionales y puede ser que algunoa de ellas sirva para eso. Sino, debe usarse JavaScript.

Responder
Anónimo  

Ola tengo un problema con los comentarios entre a mi cuenta de herramientas Webmaster y me sale que tengo Etiquetas de titulos Duplicadas y el motivo es debido es que tengo mas de 300 comentarios en ese Post y me sale varias paginas con la misma Etiqueta de titulo duplicadas
(/2009/01/lista-de-capitulos-de-naruto-shippuden.html?commentPage=1
/2009/01/lista-de-capitulos-de-naruto-shippuden.html?commentPage=337
/2009/01/lista-de-capitulos-de-naruto-shippuden.html?commentPage=338
/2009/01/lista-de-capitulos-de-naruto-shippuden.html?commentPage=339
/2009/01/lista-de-capitulos-de-naruto-shippuden.html?commentPage=340
/2009/01/lista-de-capitulos-de-naruto-shippuden.html?commentPage=3
/2009/01/lista-de-capitulos-de-naruto-shippuden.html?commentPage=4)
Como Podria Solucionar esto?
Atte LJK

Responder
Admin  

Hola JMiur, esta pregunta no va aquí pero es que me gustaria encontrar el apartado donde explicas, como hacer una etiqueta o entrada de un post mas grande de tamaño que el resto, utilizabas supongo condicionales para no poner la sidebar, nose si me explico, poder utilizar todo el ancho del blog.. hace tiempo pude leer esa entrada, pero ahora no hay forma de encontrarla por el buscador. Te estaria muy agradecido si pudieras decirme cual es. :)

Responder
JMiur  

LJK:
Es raro ue aparezca eso pero, de todas maneras, nada puedes hacer al respecto. No tendrá inflluencia en la forma en que Google indexa o posiciona el sitio.

Admin:
Efectivamente, debe tratarse de alguna condición pero no sé a cuál haces referencia. Dame alguna idea del tema que trataba.

Responder
Roudy Capella  

JMiur, ya que tocas el tema de paginación en blogger, te comento lo que sucede en mi blog: Cuando una entrada tiene 200 comentarios blogger reconoce 174 por lo que la paginación no aparece. He añadido los comentarios numerados que si registra los 200 comentarios correctamente. Entrada de ejemplo

Responder
Anónimo  

Gracias por tu respuesta

Responder
Bonzu Pipinpadaloxicopolis III  

Gracias JMiur recién lo leí, pero no me sirve (o al menos no veo cómo aplicarlo), porque quiero que una hoja de estilo se cargue sólo con Firefox ignorando al resto de los navegadores.

Responder
Roudy Capella  

JMiur, he comprobado que es un error de blogger lo del conteo incorrecto de los comentarios. Importe el blog a una plantilla minima sin usar y desde las etiquetas una de las entradas que tiene 200 comentarios, mostraba que tenia 155; mientras que en la entrada individual mostraba 139.

Luego hice la misma prueba en una plantilla de diseño de las nuevas, y mostraba igualmente datos incorrectos y diferentes a los de la minima. Es una locura lo de blogger.

Pero en una plantilla en la que una sola entrada tiene 200 comentarios se muestra correctamente.

Responder
JMiur  

Ahí ya no sabría qué decirte :-)

Responder
Lluís Hoffman  

esto lo usare cuando mi blog tenga unos 30 seguidores, porque ahora mismo no sirve para nada... T.T

Responder
Gem@  

Sabes qué? que después de tanto tiempo me puse manos a la obra con el tema de esta entrada y en mi plantilla ya se visualizaba el texto que mencionas de más antiguo bla, bla, bla... yo pensaba que ese texto saldría al visualizar los comentarios en el formulario incrustado pero no, sólo con el antiguo formulario :(

Responder
JMiur  

¿No se muestra en el formulario actual? No he visto que sea diferente a como era antes.

Responder
Paramatma  

JMiur de nuevo por aca, mira cuando tengas un tiempo entra a http://elcielosabe.blogspot.com/2010/03/desmejorado.html es mi blog, lo que pasa es que el avatar de quien comenta se sobrepone al texto como lo alineo para que no me tape nada, segunda pregunta, como aumento el tamaño de la letra de los comentarios???

Mil gracias

Responder
JMiur  

El tamaño del contenido de los comentarios lo controlas con esto:
#comments-block .comment-body {
............
font-size:13px;
}

El tema de la alineaciòn es más complicado porque, primero que nada, no sé cuñal es el resultado que quieres obtener; por ejemplo, esa parte verde ¿debe abarcar la imagen o no?

Lo que yo haría es elimianr la posiciòn absoluta del avatar porque eso, sólo complica las cosas así que ahí pondría float:left y la separaci`pon del texto, la controlas com margin, todo, en esta parte:

#comments-block .avatar-image-container {
.....................
}

Responder
Anónimo  

JMiur a mi me funciona a medias, los links de la parte superior funcionan perfectamente, los de la inferior aparecen pero no funcionan, no se que pasa ahi???
Esta es la entrada que tiene más de 200 comentarios

http://grupodinamo.blogspot.com/2011/03/seiyuu-y-mangakas-que-se-han-reportado.html

Responder
JMiur  

Los de abajo no funcionan porque el formulario está encima. Le has colcoado un margen superior negativo que lo sube, tapando (aunque sea transparente) los enlaces de navegacion de comentarios.

.comment-form {
margin-left: 30px;
margin-top: -100px;
width: 400px;
}

Ahí, margin-top debe ser cero o ser eliminado. Si quieres subir esa parte, elimina comment-footer que no tiene contenido así como un DIV que esta abajo que tampoco lo tiene; colcoa margin cero en #comments h4 {} y cambia la imagen https://sites.google.com/site/dinamodos/titulocomentarios.png que tiene 150 pixeles de alto pero es casi todo fondo blanco. Recórtala para que sólo se meustre el texto.

Te aviso que tu página redirige constantemente a:
http://www.cursormania.com/dl/index.jhtml
así que has colocado algún gadget o ad que perturba e impide el acceso cada dos por tres.

Responder
Anónimo  

Dicho y hecho, quedo arreglado, que sencillo no??

Y ya arregle lo de la redirección, gracias por el dato.....

Responder
JMiur  

Perfecto :-)

Responder
CARTOLEIROS  

http://www.cartoleiros.com.br/2011/05/dicas-cartola-rodada-1.html

aparecen pero no funciona, no se que pasa

???

Responder
CARTOLEIROS  

consegui !!! gracias

Responder
CARTOLEIROS  

pero que no
superiores aparecem pero no funcionam :(

Responder
Kesua  

Hola JMiur,

Una pregunta, hay alguna manera de que los comentarios en blogger salgan primero los más nuevos y no los más antiguos.

Gracias por tu respuesta.

Josep M.

Responder
JMiur  

No que yo sepa, Kesua.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR