JMiur [E]

Quienes tenían aplicadas personalizaciones en los comentarios y hayan decidido usar el nuevo sistema que los anida e incluye la posibilidad de Reply, se habrán visto en problemas ya que esa personalización se ha perdido y deben empezar otra vez.

El nuevo sistema ha dejado de ser lo que era y, bien o mal, Blogger ha decidido mostrar los comentarios utilizando JavaScript con lo cual, ciertas cosas se complican.

La más simple de resolver es la numeración de los comentarios ya que, tal como mostraba en esta otra entrada, es algo que podemos agregar usando sólo CSS y que funcionará en cualquier navegador.

En el nuevo modelo, debemos modificar y agregar algunas reglas; expandimos la plantilla y buscamos:
<b:includable id='threaded_comment_css'>
adentro, están las reglas de estilo de los comentarios, una de ellas es la clase .comments .comments-content, allí, agregamos esto:
.comments .comments-content {
  .......
  counter-reset: contadorcomentarios;
}
luego, verificamos qoe esta regla tenga la propiedad position: relative; si no la tiene, la agregamos:
.comments .comment-block {
  .......
  position: relative;
}
Por último, debajo de la anterior ponemos lo siguiente:
.comments .comment-block:before {
  /* el contador */
  content: counter(contadorcomentarios, decimal);
  counter-increment: contadorcomentarios;
  /* la posición dentro del rectángulo */
  position: absolute;
  right: 0;
  top: 15px;
  /* las propiedades gráficas de la fuente */
  color: #9AB;
  font-family: Century Gothic;
  font-size: 36px;
}
Y listo.

Esa regla escribirá el número de modo automático y, por supuesto, puede cambiarse. La posición del número la controlaremos con top, right, bottom y left y el el resto con las propiedades de estilo normales para cualquier texto.

37 comentarios:

Víctor Alfonso González González  

Saludos JMiur, te escribo para preguntarte una cosa que creo no se pueda realizar, pero tu eres el experto y me dirás si se puede o no.

A la hora de comentar un usuario puede hacerlo escogiendo una de las siguientes alternativas:

- Cuenta de Google
- LiveJournal
- WordPress
- TypePad
- AIM
- OpenID
- Nombre/URL
- Anónimo

¿Es posible cambiar la opción que dice Nombre/URL por Nombre/Apellido?

Responder
Artemisa  

Estoy haciendo un nuevo blog y me estaba volviendo loca para dar diseño a los comentarios, gracias por despejar mis dudas con tu aporte JMiur :)

Responder
Karla Castañeda  

Excelente opción sin usar JavaScript :D

Compartido ;)

Responder
JMiur  

Víctor Alfonso González González
No que yo sepa.

Artemisa:
Hay muchas más propiedades, las clases usadas antes ya no sirven así habrá más información en cuanto pueda :D

Karla Castañeda
Es la mejor forma, sin duda. Una de las pocas modernidades que funciona en todos los navegadores :D

Responder
Stranno  

Gracias por la información JMiur, funcionando perfecto

Responder
Emilio Cobos Álvarez  

Jmiur, no sé si viene al caso, y no se si es el lugar adecuado para ponerlo, pero me gustaría que pasaras por esta entrada por dos cosas:

Primero, por si te es interesante y, segundo, por si me podrías hacer el favor de revisar el script para Prototype (yo uso jQuery y, aunque creo que debería funcionar el que he hecho para Prototype, no lo he probado).

Gracias por adelantado.

Responder
JMiur  

Emilio:

Hasta donde he probado, Prototype no puede ser usado con el nuevo modelo de comentarios, parecen incompatibles y eso es un problema serio.

Es por eso que no tengo manera de probar tu código y por lo que estoy intentando cambiar la librería en este blog; librería que, además, me resulta bastante confusa y jamás aprendí a utilizar :-$

Así que me guardo tu entrada para cuando me ponga a ver eso. A simple vista, parece una idea muy interesante :D

Responder
Emilio Cobos Álvarez  

De acuerdo. Creía que Prototype + Scriptaculous los podías usar si los cargabas de otra manera, ahora mismo lo cambio.

Muchas gracias y saludos.

Responder
JMiur  

Por el momento, no veo que funcionen. Cualquier información al respecto será bienvenida :-)

Responder
Daniel Fernández  

¿Son ideas mías o el contador no funciona en IE9?

Responder
JMiur  

Lo desconozco, Daniel, no lo uso. En IE8 se ven correctamente así que también deberían verse en IE9.

Responder
nEjO  

y esto sirve para darle numero alas respuestas amodo de subindice? por ejemplo mi comentario es el numero uno y la respuesta es 1.1

Responder
JMiur  

No. Para eso deberías hacer muchos cambios y probablemente, usar JavaScript.

Responder
andres  

hola jmiur nuevamente agradeciendo por todos estos buenos aportes , me gustaria consultarte que debo hacer para que los numeros queden en la parte superior , por que ami me salen en el medio y se cruzan con los comentarios y no es legible, gracias nuevamente

Responder
JMiur  

Probablemente, alguna propiedad que debes ajustar pero, debería ver tu ejemplo para responder con exactitud; así en general, la altura la controlas con la propiedad top que puede ser un valor positivo o negativo.

Responder
Diak Chimba  

Hola como estas, No me sale este Codigo

JMiur  

Nada puedo decirte si no te explicas.

Diak Chimba  

Que no me sale ningún código de lo cuales hablas, me supongo por que no he activado los comentarios anidado. Los quiero activar pero no quiero perder el estilo que ya tienen los comentarios, que son:
Los Comentarios Enumerados
Y Los comentarios del Autor realzado.

Me podrías ayudar a activar los comentarios anidado pero mantener el estilo que ya poseo.

Gracias de antemano y Saludo desde Nicaragua.

PD: esta es la Dirección http://www.diakchimba.com

JMiur  

Cuando se usan los comentarios anidados, los estilso se pierden y deben ser colocados otra vez con las variantes del caso.

Responder
Diak Chimba  

Discúlpame pero tal vez mi pregunta se mira tonta pero Como seria colocarlo de nuevo con sus variante, me podría explicar por favor y decirme cuales son los estilo que utilizo.
gracias y saludes

JMiur  

Poniendo lo que dice la entrada. No sé que has hecho o que has intentado hacer.

Responder
ELSACERDOTE2011  

Hola JMiur. He hecho bien los deberes y coloqué los códigos donde corresponden pero no sale la numeración ni estilos.- Mi blog es
http://porelmundodelcrochet.blogspot.com/
Puedes ver y ayudarme que me falta o ME SOBRA?
Gracias por tu ayuda.-

JMiur  

En el blog a que haces referencia no se ve ninguna regla de estilo para la numeración.

Responder
El Ánfora Empirista  

Hola Jmiur. Quería comentar que no tengo este código
¿podrías poner todo lo que incluye, para así crearlo? o como podría resolverlo :S
gracias de antemano

JMiur  

¿Cuál es el código que no tienes? SI se trata de la reglas de estilo que muestra la entrada, deben agregarse.

Responder
El Ánfora Empirista  

Si correcto, no me aparece el de esta entrada "coment_css" y toda sus reglas de estilo que lo forman.
Que debo agregar?

JMiur  

No lo encuentras porque ya no existe. Blogegr ha ido cambiando todo el sistema varias veces, mira esta entrada

El CSS se agrega como cualquier otro, en la plantilla misma, junto con el resto.

Responder
dhayzon Wiemeyer  

no me sale ayuda el codigo ya esta colocado y nada
http://pruebasdeplantillablogger.blogspot.com/2012/06/revo-uninstaller-pro.html

una entrada donde estuve probrando

JMiur  

No veo cuál es el problema. Ahí se ven perfectamente.

Responder
Giancarlo  

Hola primero felicitarte por tu blog , quisiera que me ayudes estoy luchando dias tras dias con esto de los comentarios primero no me aparece la linea en mi plantilla
estoy actualizando mi blogger y cambie de plantilla a una simple de blogger

JMiur  

Si se trata del includable threaded_comment_css ya no existe porque con el tiempo, Blogger ha ido cambiando las cosas. Las reglas de estilo son las mismas pero se agregan de modo automático así que las puedes sobrescribir agregándolas junto con el resto del CSS de tu plantilla.

Giancarlo  

gracias por la respuesta pero no se si me puedas ayudar trato de modificar los comentarios en el blogger como enumerandolos o agregandole
diseño cosas asi pero ninguna me funciona

este es el link de mi blogger www.blogdegiann.blogspot.com
ojala puedas ayudarme de verdad me falta eso para comenzar a actualizar mis entradas
te lo agradeceria mucho

JMiur  

Simplemente tienes que copair las reglas que die la entrada y las colocas en el CSS de tu plantilla:

.comments .comment-block {position: relative;}
.comments .comments-content {counter-reset: contadorcomentarios;}
y esta que define el formato:
.comments .comment-block:before {............}
por ejemplo:
.comments .comment-block:before {
content: counter(contadorcomentarios, decimal);
counter-increment: contadorcomentarios;
position: absolute;
right: 0;
top: 0;
color: #000;
font-size: 20px;
}

El resto, nlo puedes ver en es tas dos entradas: 1 y 2

Responder
Giancarlo  

gracias de verdad hize lo de las entradas 1 y 2 y copie todo al css y funciono se ve muy bien ahora el blog ... una consulta mas ahora casi todo se programa en css ??

JMiur  

El CSS no es un lenguaje de programación así que la respuesta sería no pero, es una parte sustantiva de cualquier página web. Siempre lo fue, no sólo ahora :-D

Responder
Giancarlo  

tu crees que me puedas ayudar ... quisiera que cuando los usuarios de mi blogger escojan una categoria puedan ver los titulos de las entradas y darle click a ellas para verlas asi se veria mas ordenado :D

JMiur  

No entiendo qué es lo que quieres hacer; si cuando se hace click en una etiqueta, quieres que sólo se muestre una página con la lista de títulos pero sin contenido, se debe agregar alguna clase de script y condicionar la plantilla. Las condiciones posibles que tiene Blogger implican que no sólo se afectará a esas páginas sino a otras como las de archivos, etc.

Responder

¿Quiere dejar un comentario?

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

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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