JMiur [E]

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.

246 comentarios:

Blog nuevo  

Aplicando... :-)

JMiur  

Suerte y paciencia, amigo :D

Gem@  

Yo sigo probando como suelo hacer voy a ver que saco en claro de esta entrada.

JMiur  

Esa es exactamente la idea del post, promover los experimentos porque con ellos, aprendemos todos.

Blog nuevo  

Yo recién aprendí a que hay que tener un respaldo de la plantilla si o si, antes de andar haciendo cambios.

Hace un rato se me caía una lágrima al pensar que tenía que hacer toda la plantilla de nuevo, es que aplicando unos trucos raros que me encontré en no se donde, veía como en Firefox estaba todo viento en popa y en IE era un desastre. Y no sabía como arreglarlo... de casualidad tenía una copia media vieja de la plantilla, y actualice.

Otra cosa que me lamento, es que unos foristas estan meta copiar post y post, me vi obligado a poner un script para que no se seleccione texto y acorté la info del Feed. Sé que no es 100% seguro, es decir, con maña copias igual pero al menos cuesta más, espero que no se aviven y se aburran, asi no me copian ntanto. Y obvio que sé que es malo para otros lecotres que derepente quieran copiar algo bien, y lo del feed también se que no es recomendado.

Pero bueno... no puede ser que Google indexe los post de un foro y los mios los deje de lado, cuando me mato escribiendo palabra por palabra. :-)

JMiur  

Espero que no haya sido demasiado grave. Tener una copia de seguridad es fundamental y si se quieren hacer cambios profundos, lo mejor es crear un blog de pruebas y probar los cambios allí.

También es aconsejable utilizar la VISTA PREVIA antes de GUARDAR. Si usás Firefox, con la extensión IETAB es posible ver los cambios como se verían en IE incluso desde la VISTA PREVIA.

Lo de la copia, es lamentable, ya no se trata de copias manuales si no de usar los feeds y eso es muy difícil de evitar.

Roberto Caamaño  

Yo estoy haciendo pruebas acerca de esto y me salen puros errores, por ejemplo que me falta cerrar el codigo "b:if".

JMiur  

La única parte donde hay un bloque IF es esta:

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

deberías revisarla.

cuando Blogger dice que falta cerrar la etiqueta significa que no encuentra:
</b:if>

Roberto Caamaño  

Ya corregi!

Claudio - Poca Tinta  

Interesante este post, lo trabajare para usarlo, una consulta, veo que solo sale la hora del comentario y no la fecha.
Lo hiciste asi a drede imagino. Se puede dejat la fecha tambien.

JMiur  

Si, exacto, está puesto asó a propósito. Si mal no recuerdo, eso está en la parte de Configuración de Blogger.

Blog nuevo  

Aplicado... :-) (una parte)

JMiur  

Acabo de verlo recién ahora :)

Rom  

No, todavía aquí molestándote..... encontré este hack y lo probe en pero no me sale como en tu blog..... mira una prueba

prueba

Si puedo modificar el color, pero por más que le dí un tamaño a la fuente de 78px, sigue chica y al costado de "dijo...", no aparece a la derecha aún cuando el float lo indica así...

¿me daría una ayuda mi estimado?

Un saludo desde Lima, Perú

JMiur  

Parecería que tienes un error. Dice:
comentacontador { xxxxxxxxxxxxx
cuando debería decir:
.comentacontador { xxxxxxxxxxxxx

falta el punto delante del nombre y por lo tanto, la clase no funciona, el navegador la ignora.

Las propiedades básicas deberían ser:
float: right;
font-size: VALORpx;
line-height: VALORpx; /* igual al tamaño del font */

Es probable que deba agregar un:
margin-top: VALORpx;
con un valor negativo para que "suba".

Rom  

Gracias por la ayuda, pero he probado y nada, sigue igual. Efectivamente faltaba el punto, pero por más que lo he agregado y agregado las líneas que me indicaste, sigue lo mismo. ¿Alguna idea mi estimado?. Como viste, se me escapó lo del punto debido a mi ya falta de concentracíon.

Un saludo desde Lima, Perú

JMiur  

Sigue sin mostrarse la clase, por eso no hay cambios.

Parece decir:

/* numerar los comentarios */.
.comentacontador {

hay un punto ahi, luego de la barra de cierre */.

La única clase que no parece mostrarse es esa así que del error de sintaxis está ahí.

Rom  

que vergüenza!!!!!!!.... ¿cómo se me pudo ir ese detalle?... ¿tan mal estoy en realidad luego de bregar con tanto código php, asp, js, ajax y css, que NO pude ver ese "simpático" punto?.

Bueno, asunto solucionado, y con mi ego por los suelos, te demuestro mi aprecio por tu preocupación y dedicación a tus visitantes.

Un saludo cordial, sincero y amical desde Lima, Perú

JMiur  

No hay problema, si el refrán dice que al mejor cazador se le escapa la liebre ... imagina que fácil es que se escape un maldito puntito :D

Me alegro que se haya resuelto.

JUANAN URKIJO  

Hola estupendo!
No sé si ando un pelo espeso a estas horas de la noche, pero rastreo tu blog en busca de algo... que tal vez no existe:
Me gustaría crear una sección en mi menú, en la que aparecieran por orden las entradas más comentadas. ¿Existe algún artilugio ad hoc? O, lo que sería mejor, ¿podría hacerlo un patán cualquiera (como yo mismo), manualmente?

No quiero abusar de tu tiempo. Si te viene bien, me dices algo. Me hago cargo.

Un cordial saludo.

JMiur  

Dédalus:

He visto en algunos sitios algo similar a eso pero no sé cómo lo han implementado. Por cierto, me gustarías saberlo ;)

Anónimo  

Hace unos días apenas implemente este sistema para visualizar mejor los comentarios, ya está todo listo y de verdad mejora mucho la vista, sobre todo lo de los fondos para pares e impares.

Ahora me gustaría que el fondo de mis comentarios apareciera de otro color diferentes a pares e impares, se que es posible pero aun no lo logro, a lo más que llegue con ayuda de el escaparate de rosa, fue a cambiarlo, pero aparecía un cuadro solo con mi texto dentro del cuadro de par o impar.. no se si me explique.

Pero hay alguna manera de hacer que el color del fondo de un comentario mio, sin importar que sea par o impar aparezca de otro color?

De antemano agradezco como siempre tu ayuda JMiur! ;)

JMiur  

Buena pregunta :)

En teoría, diría que sí, que es posible ya que podemos identificar cada comentario individualmente y además, podemos identificar el autor.

Déjame pensarlo un poco a ver si le encuentro la vuelta. Me gusta la idea :D

Anónimo  

Rosa usa esto: <b:if cond='data:comment.author == data:post.author'> y en este post lo explica, lo puse como ella lo dice y funciona perfecto, pero ya con el hack que tu tienes, solo aparece un cuadro de otro color, adentro del cuadro grande, abajo la hora, arriba el Nick

Imagino que de alguna forma se podria implementar con el script que cambia los pares e impares.

JMiur  

Sí, justamente, de eso se trata, hay que ampliar el script o buscar la forma de interceptarlo para crear una tercera clase CSS; en teoría debería ser sencillo pero, en la práctica no lo es tanto :)

Anónimo  

Bueno yo le sigo moviendo, espero me avises si encuentras la forma de hacerlo :-)

Gracias

JMiur  

Ya tengo una idea de como hacerlo pero, excede las posibilidades de un comentario. No es sencillo escribir códigos en esta cajita blanca.

Lo pondré como un post así que, probablemente, mañana lo puedas ver y allí seguiremos la charla a ver si resolvemos el problema ;)

Unknown  

Hola, JMiur.

He implementado esto en mi blog pero no funciona bien con IE. Creí que era porque faltaba la propiedad height, y mejoró algo, pero no del todo. Lo que pasa es que el número se corta en la parte superior (antes de height se cortaba arriba y abajo).

He intentado cambiando los valores de padding y de margin, pero nada funciona.

Gracias por tu ayuda.

A propósito: la ventana emergente para los comentarios de tu blog sale con un fondo gris en Firefox y con fondo blanco en IE. Supongo que es un error, por eso te lo comento.

JMiur  

Deberías revisarlo un poco más porque funciona correctamente en ambos navegadores así que, lo más probable, es que haya alguna propiedad estorbando. Fíjate, por ejemplo AQUÍ; es el blog de Opcionez.

En el caso de los comentarios en una ventana modal, eso es un IFRAME así que no es fácilmente controlable porque no puede modificarse el CSS de una página externa. El resultado, dependerá de esa otra página y de los navegadores.

Unknown  

No entiendo qué pasó; hice un comentario en comment-form incrustada y no salió. Te decía que arreglé el problema que te comentaba (comentario 28) sin quererlo. Me dí cuenta de otro problema (que los números de los comentarios no enlazaban nada) y al arreglarlo, se arregló el otro también.

Así: cambié el código viejo por éste:

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + data:comment.id'/>

La url de cada comentario era diferente. Al poner este código, el número sí enlaza al comentario correcto y, por arte de magia, el número se muestra completo en IE.

Gracias.

Unknown  

mmm... ahora tengo otro problema. Desapareció la B de blogger que estaba delante del nombre de cada comentarista.

Es una cuestión minúscula, pero me hace falta. y no quiere el complicado proceso de poner todos esos códigos para personalizarla. Quiero que salga como debería hacerlo de manera predeterminada.

Gracias, qué pena la molestia.

PD: el comentario anterior no salió porque puse el código con los signos > < sin pasarlos a... cómo se llame la manera larga de escribirlos.

Adiós.

JMiur  

Me parece que el problema sigue estando en la misma línea:

<dt class='comment-author'
expr:id='"comment-" + data:comment.id'>

Esa parte en negrita debería ser así:

expr:class='&quot;comment-author &quot; + data:comment.authorClass'

Unknown  

Qué loco es todo esto. Cambié lo que me dijiste y funcionó. Pero ahora se volvió a dañar en IE; los números salen incompletos.

Igual, muchas gracias.

Anónimo  

Gracias por el dato JMiur, apliqué los cambios y todo funcionó bien salvo por un detalle.
En tus comentarios al presionar el número de la derecha, el vínculo al comentario, ese comentario aparece en el tope de la pantalla. En mi blog esto no pasa, presionar el vínculo no provoca nada.
Sabés por qué puede ser?

JMiur  

Esa parte tiene más o menos este código:

<a expr:href='&quot#comment-&quot; + data:comment.id'>
<script type='text/javascript'>
contadorComentarios=contadorComentarios+1;
document.write(contadorComentarios)
</script>
</a<

Fíjate en la parte del enlace; es algo que no puedo verificar online.

HaCk CrAcK  

este ultimo pedaso en donde lo agrego?
function ContarC(cual) {
var resto;
resto = contadorComentarios % 2;
if (resto == 0)
document.getElementById(cual).className='comentarioPar'
else
document.getElementById(cual).className='comentarioImpar'
}

JMiur  

En el header de la plantilla.

HaCk CrAcK  

Ok, gracias!

Anónimo  

;) Me llevé esto... me lo pidieron pero no sabían Español.

Yo, aquí, ¿haciéndolo internacional?

xD :)

JMiur  

Jajajaja Yeah, man; spanish rules ;)

Anónimo  

Geez- I gotta be bored! xD!

¡Quiero sushi!

Paula  

Hola!

Hace tiempo que queria algo asi en mi blog... y leyendo el blog de fernando llegue hasta aquí, pero para variar no me resulto muy bien :S
Puse todo el código, traté de seguirte literalmente pero parece que finalmente igual me equivoqué... me puedes ayudar por favor? :D

Al final lo único que me apareció fue el número del comentario, justo donde debe estar, pude achicar la fuente y cambiar el color; asi que con eso todo bien (eso si, me gustaría saber si se le puede sacar el subrayado de los números)

Con respecto al fondo y separación entre los comentarios... no pasó nada, quedó igual que siempre.

Ojalá me respondas. Saludos y gracias por tener este blog! :)

JMiur  

Ahhh Fernando, es urgente que puedan insertarse imagenes en los comentarios :D

Paula: tienes varios blogs, me voy a referir a http://planetab.blogspot.com/
Si es otro, me dice.

Para quitar el subrayado de los números, busca esta definición y agrega lo que está en negrita:
.comentacontador a:link, .comentacontador a:visited {
color:#BE81F7 !important;
text-decoration:none !important;
}

El resto parece estar bien pero, me resutla un poco difícil analizarlo ¿Podrías colocar el script en varías líneas y n oen una sola tal como se ve en ejemplo? de esa manera podría ejecutarlo paso a paso y verifiar el problema.

Lo otro que me impide hacerlo es el script de imagen de carga; si puedes desactivarlo momentáneamente, ayudaría mucho. Es posible que ese script también esté perturbando pero eso sería un paso posterior.

Paula  

Gracias por responderme tan rápido :D

Hecho lo del subrayado y la imagen de carga.

También puse el codigo en lineas... ordenadito ^_^ es que en mi décimo intento de que me resultara esto copie y pegue el codigo que pusiste sin hacerle cambios a ver si asi resultaba... al final no paso y me decidi a preguntarte directamente.

Ahh, con respecto a lo del blog, si es con ese con el que tenia la duda... esta adiccion bloguera me esta afectando la mente, lo siento.

Ah, y por ultimo, no me trates de usted... que no tengo ni por donde xD

Gracias de nuevo :D

JMiur  

Sigo viendo la funcion toda en una sola línea en el código fuente. Me da la impresion que por ahi está el problema.

¿Puedes verificar que escrita esté así?

function ContarC(cual) {
var resto;
resto = contadorComentarios % 2;
if (resto == 0)
document.getElementById(cual).className=&#39;comentarioPar&#39;;
else
document.getElementById(cual).className=&#39;comentarioImpar&#39;;
}

¿Y que la otra, esté escrita así?

<script type='text/javascript'>
ContarC(&#39;<data:comment.id/>&#39;)
</script>

Estoy copiando y pegando los datos de mi plantilla para descartar cualquier pequeño error.

Paula  

Si!! Ahora si me funciono :D
Gracias, gracias, gracias :D

Por tu tiempo y paciencia, una ultima molestia y prometo dejarte en paz :s se puede cambiar el tipo de letra del número?

JMiur  

Me alegro que se arreglara, Paula :D

Lo de las fuentes de texo es sencillo, está en:

.comentacontador {big-buck...unny.html (línea 307)
display:block;
float:right;
font-family:'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size:25px;
font-weight:normal;
margin-top:-30px;
text-align:right;
width:50px;
}

Des de allí controlas todo, incluso la paosición del númeo que ahora tiene margin-top:-30px; y puedes "bajarlo" colocando un valor mayor, por ejemplo margin-top:-20px;

Fíjate que son números negativos.

Paula  

Gracias de nuevo :D
Chau!

Ignacio  

Muchas gracias.

Anónimo  

http://blogmenjerit.com/2008/08/10/memasang-penomboran-pada-komentar/

translate to bahasa melayu (malaysia language)

JMiur  

Oh my God! It is an honour.

I'm glad to have been useful. Thanks for your comment :)

Paula  

Wow! que internacional! :D
Felicitaciones

JMiur  

Hay que agradecerle a la traducción de Fernando :D

Anónimo  

xD!

Después de EEUU, INDONESIA es el país que más me visita :$.

;) Ya estás internacionalizado. Cumplí con mi objetivo (MWHAHA).

Pásate por mi último post, quizás te interese.

JMiur  

Allá voy ...

... a leer el post, nno a indonesia, claro.

Anónimo  

Ya tengo todo pero en mi IE se ve un caos mientras que en Mozilla se ve perfecto. ¿Qué se puede hacer ante eso?

JMiur  

Bilioso:
Da la impresión de haber una etiqueta mal cerrada que Firefox corrige pero IE no.

Es algo que no puede verse online pero, a partir del primer comentario, comienza a descalabrarse y el motivo es un mal cierre o un cierre de más.

Anónimo  

Y entonces? revisar todo el código?

JMiur  

Por lo que llego a ver del código fuente, diría que el problema está en alguna parte del truco para hacer que los comentarios se muestren como pares e impares.

Shark_Bloody  

De todo esto solo tengo una duda como modificar la fecha(el tamaño, color, etc.).

Pd: solo nesesito saber el nombre del div, por ejemplo el de los numeros es: .comentacontador
espero tu respuesta, gracias por siempre ayudar.

Shark_Bloody  

Bueno, ya me parecia raro que no hubiese cometido ningun error, el tema es que al hacer click en el número de los comentarios, en princio, la accion funciona, la pagina sube o baja hacia el comienso del comentario, ahora el problema: se corre todo el outer-wrapper unos cuantos pixeles a la izquierda, las propiedades de los comentarios se pueden modificar desde el codigo de la plantilla, asi que te encargo, si tenes tiempo, revisarlo.
Gracias de antemano.

JMiur  

Así es, la clase .comentacontador es la que controla las propiedades de los números.

En tu plantilla, la fecha usa la clase .comment-timestamp

Sobre el tema del click. No sé qué quieres hacer. En preincipio, ese enlace es el "permalink" al comentario, es decir, va a subir o bajar hasta dejar ese comentario en la parte superior de la ventana.

<a title="Vinculo al comentario" href="#comment-XXXX">

No tiene errores.

Anónimo  

hola man, mirá tengo problemas con esto, a partir del quinto o sexto comentario masomenos, se desbanda todo, y se desproporciona toda la plantilla, el sidebar se va hasta abajo y los comentarios ocupan lugar sobre y detrás de los posts. en firefox se ve excelente, pero en IE se vé pesimo como te lo detallé(http://heroeshumanos.blogspot.com/2008/08/sentir-entrevista-1.html?showComment=1219543140000#c7395457173890580329). veo que en IE tu blog se vé perfecto enc uanto a los comentarios numerados, supongo que necesito algun codigo extra, ya que la plantilla de mi blog está apenas modificada en cuanto a los comentarios y no le encuentro el motivo del error para poder visualizarlo bien en IE, espero respuesta, saludos y gracias.

lheonnel@live.com.ar

JMiur  

lheonnel:

Esoes algo que online no alcanza a verse pero, por lo que describis , el problema debe ser una etiqueta mal cerrada. Habría que revisar cuidadosamente los cambios hechos.

Anónimo  

:s ya recontra revisé., y falta algo che, lo que falta es algo pa alinear las cajas de comentarios dentro del main para que no se desbanden, en firefox funciona bien, pero no en IE, asi que es algo de eso,¬¬ KIERO soluciones ¬¬

Anónimo  

el problema es con el identificador de pares e impares, no es del todo compatible con IE o algo de eso

JMiur  

Como verás, aquí funciona así que si es compatible. De todas maneras, el script no crea bloques, sólo cuenta.

Todo l oque sea alineacion se controla con CSS y depende de las propeidades colocdas y e las propiedades heredadas, es decir, las que ya posea tu plantilla.

En http://heroeshumanos.blogspot.com/2008/08/sentir-entrevista-1.html no veo ningun script colocado ni implementado nada de esto.

Anónimo  

naaa si ya lo saké de ese blog, ahora lo probé en este www.inhdigo.tk y ahi le encontré la falla, el problema es el identificador de pares e impares,x alguna razon no funciona en la plantilla madre ¬¬ aunke siga los pasos que indica tu tutorial, hay algo en la plantilla que impide que sea compatible en IE, por lo visto con tu plantilla madre ese problema no existe. De todos modos ya lo arreglé. y al menos numera en IE y FIREFOX, el unico drama es que no consigo implementarle una imagen en la cabecera de la imagen,pero bue... mejor, menos peso para cargar. y de si es par o no par...mucho no jode, despues lo veo, está parcialmente solucionado el problema, y con eso me basta. saludos.

Antony  

Hola!

He estado buscando esto durante mucho tiempo y por fin lo conseguí, había conseguido uno pero con efecto hover y bueno era bastante sencillo pero no me gustaba mucho...

Saludos!

JMiur  

Saludos, Antony. Me alegro que te fuera útil.

JMiur  

Lo del espacio en blanco es por el margen que tiene:
#comments dl dt {
margin-top:35px;
simplemente, elimina esa propiedad.

En términos generales, la alineación se consigue con los márgenes pero no se que quieres hacer exactamente.

kenneth978  

Me salio calidad...ahora tengo 1 pregunta : como le puedo cambiar los iconos que salen a lados del que comenta por una imagen mas personalizada? osea quiero que con imagenes se diferencie autor,otros blogeros y los anonimos..la imagen del autor personalizada que quede dentro del fondo mas oscuro y la de otros blogeros y los anonimos dentro del mas claro... digame cual es el post o hagame una refencia...Saludos...

JMiur  

Me alegor, Jedimaster :D

Kenneth Jack:
Eso lo puedes ver en la segunda parte del post AQUÍ

Anónimo  

JMiur, será que haveria possibilidade de fazer o mesmo com as postagens? estabelecer um plano de fundo para as postagens pares e outro para as ímpares?

JMiur  

Creo que se podría hacer, Ariane. Lo voy a pensar a ver si encuentro la forma.

Gem@  

Los comentarios de mi blog ya están más que modificados no podría añadir la numeración o se caería de tanto peso. Sin embargo no pude contenerme a probar y al igual que leo en algún comentario si se clica en la numeración en la barra de direcciones muestra el enlace al comentario pero se queda estático, no se muestra el comentario en primer lugar. El enlace a comentarios dice:
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='Vinculo al comentario'>

Gem@  

Este es para llevar el seguimiento :O

JMiur  

El enlace ese es un enlace a un lugar especídico por eso se agrega #

Por ejemplo. Ten a la vista elos números 77 78 y 79. Haz click en el 79 y verás que la ventana sube hasta posicionarse allí. Si no lo hace es porque en la barra de direcciones el enlace es el mismo. Haz click otra vez en el 79 y n oxse moveróa porque está allí.

¿Esa es la duda? Ahora ya no estoy tan seguro :D

Anónimo  

Felicidades excelente aporte que haces a toda la comunidad del internet...

Thanks..

Francis Saucí  

Estimado JMiur, quisiera enumerar los comentarios de mi blog y por ello he seguido todos los pasos que aquí comentas pero me da un error que dice algo asi: "aparece HTML6 y no es posible pues deber ser exclusivo". Mi plantilla es la blogy insense. ¿Qué debo hacer?, ¿Me puedes ayudar?.

Quiero poner los comentarios así como los tienes tú: con un icono delante del autor del comentario, que aparezcan numerados, y con la fecha a la derecha.... Es decir, JUSTO como aparece en tu blog. A ver si me puedes explicar cómo hacerlo.

Gracias de antemano y FELIZ ENTRADA DE AÑO.

JMiur  

francis:

No entiendo muy bien eso del error que dices respectos a HTML6, eso, suena a un error que ocurre cuando agregas elemento y tienen nombres (ID) repetidos. Suele resolverse simplemente buscandolos y cambiando uno de ellos, por ejemplo, porner HTML60 o cualquier número alto.

Digo que no lo entiendo porque para esto no hace falta agregar elementos, de allí mi duda sobre que responder en concreto.

Eliban Meyer  

Hola:

Tu página es muy interesante y me han servido varios consejitos tuyos, pero el que más quiero y más he estado buscando no me sale!!!!! No sé que hice pero después de un buen rato de tratar de seguir las intrucciones para cambiar el formato de los comentarios todo me quedó exactamente igual. Ojalá me pudieras ayudar porque me molesta como se ven los comentarios en mi plantilla.
Muchas gracias por tomarte el tiempo para que los demás estemos más contentos con nuestros blogs, bye!!

JMiur  

Eliban:
En este momento, no veo los códigos en tu blog. Envíame un mail contándome qué has tratado de hacer y vemos los detalles.

Anónimo  

hola, el truco funcionó muy bien, ahora por fin tengo los comentarios más ordenados.

JMiur  

Me alegro que funcionara. Winjaime :D

Paramatma  

Hola JMiur yo otra vez por estos lares, mira que he implantado tu segundo codigo para tratar de organizar mi codigo y lo he puesto antes de < / head > como lo dices y no me funciono q podria haber pasado?

Dejo el codigo en mi plantilla para q si tienen tiempo me corrijas Gracias!!

http://gocase-otroblogdepruebas.blogspot.com/

Usuario10  

Hola JMiur,
Como te comente la vez pasada he estado trabajando en una plantilla nueva, estoy dibujando cada boton con photoshop, me interesa mucho tu opinion, podrias darle una mirada?

Este es mi BLOG DE PRUEBAS

Ahora fijate tengo un problema aplique este estilo de poner los fondos intercalados, me funciona muy bien con mozzila.

Mi problema empieza con internet explorer. Los comentarios se comportan de una manera rara. Los botones de navegacion se mueven a la derecha cuando son mas de 7 comentarios, y pierde la secuencia de los fondos, todo se pone de fondo negro y al llegar al comentario 7, el texto se centra y se amplia a todo el ancho de la pantalla.

Espero puedas decirme por donde le pueda moverle, ya utilize el "!important" en los fondos par e impar pero tampoco funciona.

Saludos JMiur.

JMiur  

GOCASE:
El script está mal, fíjate si no que le falta una parte; por lo menos online, se ve que falta una parte.
document.getElementById(cual).className='comentarioPropio'


Tigerman:
En enlace no salió así que no pude ver nada.

Usuario10  

Este es el enlace http://donwload-movies.blogspot.com/

Saludos

JMiur  

Debe haber un DIV mal cerrado. Mejor dicho un DIV se cierra en un lugar equivocado y eso hace que el bucle se descalabre. No es un problema del CSS.

El tema es que no es algo que pueda verse online pero está ahí, en esa parte del código.

Anónimo  

Hola JMiur. Sabes? antes de implementar este truco en mi blog tenía uno que ví en lo de Gem@ que servía para mostrar la imagen del perfil en los comentarios. Pero después de que implemente este truco la imagen del autor ya no se muestra qué podra ser que hice mal??? :((
Si puedes ayudarme te lo voy a agradecer muchísimo mi blog es http://lenguaje-inverosimil.blogspot.com/

Gem@  

Insomnya el código de imagen del perfil en los comentarios no funciona desde esta tarde, y no es problema de servidor porque está online pero tampoco puedo aclararte por qué está ocurriendo.
Lo mejor esperar, para ver si se soluciona o quizás J.Miur tenga otra idea ;)

Turko  

Saliendome algo del tema JMiur, tengo una duda: ¿para que sirve la propiedad !important; ?

He leído algo al respecto pero aun no la entiendo bien.. :S

JMiur  

Insomnya, Gem@:

Es raro. El script está y se ejecuta. El PHP que lo hace funcionar también está pero, en lugar de "devolver" la imagen, dice que la URL del perfil no existe aunque si existe.

Puede ser un problema temporal o bien algún cambio interno en los perfiles que obligue a que ahora, deban leerse de otra manera.

Habrá que esperar o ponerse a buscar en la web alguna respuesta.

Anónimo  

:) Gracias JMiur y Gem@ pensé que tenía que ver con esto de la numeración en los comentarios pero bueno ahora sé que es un problema blogger ojalá se solucione! :(
Habrá que esperar.
Mis saludos y agradecimientos a los dos :D

Unknown  

JMiur me da este error:
The element type "b:loop" must be terminated by the matching end-tag ""

Bonzu Pipinpadaloxicopolis III  

Con la paginación de comentarios el contador empieza nuevamente apartir del 201.
Se puede arreglar?

JMiur  

TRECARUNGA:
Todo lo que está entre <dl id='comments-block'> y </dl> es correcto y no presenta errores así que el error debe estar en otra parte. No es algo que pueda verificar online.

Bonzu:
Eso es raro porque no hay ralación entre ambas cosas. Debería ver un ejemplo para contestarte.

Unknown  

JMiur, entonces te mando la plantilla ppor e-amil?

JMiur  

Envíala pero sól opodría indicarte dónde colar el código o ver si hay algo extraño en ella que la hace diferente.

CC.OO. FAISEM Sevilla  

Hola, como no le veo mucha utilidad al hecho de que los números sean enlaces... ¿Cómo puedo quitar esa utilidad? Es decir, no quiero que los números sean enlaces. ¿Puedes ayudarme? Gracias.

JMiur  

El enlace, es esta parte, lo que está en negrita:

<a expr:href='"#comment-" + data:comment.id' title='Vinculo al comentario'>

<script type='text/javascript'>
contadorComentarios=contadorComentarios+1;
document.write(contadorComentarios)
</script>

</a>

CC.OO. FAISEM Sevilla  

Muchas gracias, solucionado.

Bonzu Pipinpadaloxicopolis III  

Esta es la Página 1 con los primeros 200 comentarios y en la Página 2 los siguientes.
Como vez el contador se reinicia en cada página.

Lo mismo en tu blog en la página 1 y 2.
Peor, solo muestra 198 en la primera.

JMiur  

Ese sistema de paginación lo maneja Blogger, supongo que la cantidad no es siempre 200 porque debe contar los eliminados. Tal vez haya alguna forma de saber la cantidad que arrastra pero lo desconozco.

Bonzu Pipinpadaloxicopolis III  

Se podrá condicionar que en la segunda página el contador empieze en 201?

JMiur  

Tal vez, no sé si puede identificarse.

Diego  

Buenas, este tutorial ha sido sencillamente (digo sencillamente porque mejor explicado imposible) increible.

Pero, tengo una duda. Me quedé con las ganas de ponerle un icono delante del nombre, ya sea el mío o el de un invitado (eso sí, el mío sería diferente). Tal y como lo tienes tú, vamos! ;D
Es que arriba en la entrada ponías que también iba a resultar para eso, y no lo ví por ningún lado.
Espero que puedas contestarme.

Saludos!^^

JMiur  

Fíjate en la segunda parte del post: AQUÍ.

Diego  

Muchas gracias, JMiur! :D

Emb  

Muy bueno...gracias

Raul  

JMiur, me funciona perfectamente, solo que como a mi no me aparecía </style> lo puse encima de ]]></b:skin>
Y me funciona correctamente, es como si ]]></b:skin> fuera lo mismo que </style>

JMiur  

Me alegro que funcionara.

Lo que has deducido es correcto.

<b:skin> <//b:skin> es lo mismo que la etiqueta STYLE, sólo se llaman diferentes porque ahí adentro, Blogger permite colocar otro tipo de datos como variables para el color etc.

Play  

alguien que me ayude los numeros los tapa la barra lateral:
http://cargohe.blogspot.com/2009/04/aio-curso-interactivo-de-photoshop.html
como los ruedo un poco mas a la Izquierda

JMiur  

Por lo márgenes que tiene el área de comentarios, el ancho colocado es excesivo.

Busca esto y cambia el valor de width por uno más pequeño, tal vez, 530px:

#comments-block {
............
width:530px;}

Otra alternativa, elimina el margen agregando esto:

#comments ol {margin:0; padding:0;}

Play  

Muchas gracias ahora si funciono hice lo primero. :D

JMiur  

Me alegro que funcionara, cargohe :)

egoloco  

Tengo ganas de provarlo, pero no estoy seguro de que funcione en mi plantilla, tengo el presentimiento de que le falta algo. Me gustaria que me indiques, en caso de que falte, qué es. Se que tenes mucho trabajo, pero mi plantilla creo que no se hizo para mostrar comentarios, aunque haya hecho aquel truco para que se muestren debajo de los post. De nuevo gracias!!

JMiur  

egoloco: No sé a cuál de tus blogs te refieres pero, así, a simple vista, tienen una estructura standard así que no debería haber problemas.

egoloco  

Bueno jeje hice varios blogs a proposito para hacer prubebas para ver como queda en el original que es egoblogo.blogspot.com
Mi duda es si hay que agregar todo lo que esta en el post o solo lo que marcas con color. Porque hay cosas que no tienen color que no aparecen en mi plantilla, de ahi mi duda. Si decis que no hay problema, entonces agrego y veo que resultados tiene. Por suerte aprendi a usar un respaldo trabajado con "Araneae", metiendo mano alli y luego colocar las modificaciones al blog.

JMiur  

Lo fundamental es l oque está en color, lo otro, es una guia para ver donde se coloca. Las palntillas van variando con el tiempo, incluso las originales de Blogger así que, más o menos, hay que adivinar :D

Psicopompo  

Hola.

Tengo una pregunta. ¿Cómo cambio el color de "XXX comentarios:" y el de "¿Quiere dejar un comentario?"? Lo he buscado por toda mi plantilla y no lo encuentro. Lo curioso es que ya lo hice una vez...

Gracias.

JMiur  

DAyara:

El color de XXX comentarios lo encuentras en #comments h4 { ....... }

El de "¿Quiere dejar un comentario?" en intraterra es el mismo H4, ambos textos usan el mismo color. Si queires que ese último sea diferente, agrega esto y allí coloca el color:
#comment-post-message {........}

En tu otro blog, no hay nada definido así que deberás agregar algo así:
.comment-form h3 {........}

Psicopompo  

Muchas gracias, JMiur. Y perdona que no haya especificado que hablaba de Intraterra, en el otro blog sólo colaboro, por eso ni lo había tenido en cuenta.

Un saludo. :)

JMiur  

No hay problema, DAyara :D

ilo  

Hola! Tengo blog hace muy poco y mis conocimientos sobre el tema son bastante escasos, quiero numerar los comentarios y no me sale de ninguna manera... y lo que explicas aqui me resulta algo complicado... es la unica manera para numerarlos??

ilo  

hola, tengo blog hace poco, y no se casi nada de HTML estoy algo perdida.. no hay otra manera mas sencilla de numerar los comentarios?

JMiur  

No que yo sepa, Serval. Y tampoco hay forma de aprender todo en un instante. Los blogs se construyen con paciencia y con tiempo.

ilo  

Bueno, finalmente me he atrevido a meter mano a la plantilla, y me ha salido la numeracion de comentarios!!!! Muchas gracias por tu blog!! Me sirve de mucho!!! ;)

JMiur  

Me alegro que funcionara :D

Bonzu Pipinpadaloxicopolis III  

Intenté usar las condicionales de blogger para que el contador encaso de estar en una página individual con commentPage=2 comienze apartir de 200 pero no funcionó. Se te ocurre algo?

JMiur  

La verdad, no lo he visto. Tal vez con un script que leyera la URL de la página y detectara si le encuetra algo como ?commentPage=numero, leer ese número y usarlo para empezar el contador con un número distinto de cero. Algo así pero sólo pienso en voz alta.

Bonzu Pipinpadaloxicopolis III  

En sentido web encontré algo así. Se podrá usar en en Blogger o las condicionales son mejores?

JMiur  

Ese es un script para leer la URL de alguna manera, no sé si tiene aplicaicón en este caso o si es mejor una cosa u otra, todo depende; debería ver un ejemplo de uso concreto.

Ivoc  

no me salen los colores q diferencian los pares/impares

el resto, creo esta bn

Bonzu Pipinpadaloxicopolis III  

Se me ocurrió usar esta condicional para numerar los comentarios de la página 2 y que empiecen desde 200:

<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=1&quot;'>
<script type='text/javascript'>var contadorComentarios=200;</script>
<b:else/>
<script type='text/javascript'>var contadorComentarios=0;</script>
</b:if>

Funciona, mira la página 1 y ahora la dos.
lo malo esque obviamente cuando pasa a la página tres comienza de nuevo en cero y así en el resto, me gustaría añadir las condicionales para el resto pero no estoy seguro cómo, auxilio JMiur‼ ;-).

JMiur  

La verdad es que no es un tema que haya visto ni tengo como experimentarlo, es demiado específico. Así, en el aire, podría usarse un script que leyera la URL:
xxxxxxxxxxxx?commentPage=2
extrajera ese dato final, y lo usara cpmo valor para establecer la variable contadorComentarios en funcion de eso 0, 200, 400, etc. Todo eso, al inicio, en el head del sitio.

Bonzu Pipinpadaloxicopolis III  

Quizá no te llegó mi comentario anterior pero ya lo solucioné.

data:post.olderLinkUrl genera la url del texto ‹Más antiguo, por ejemplo si estamos en la página dos creará un enlace a la página uno.

<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=1&quot;'>

Esta condicional no detecta si estamos en una url con determinado parámetro pero sí detecta cuál parámetro es el anterior.

Si estamos en la página cinco la condicional tendrá ?commentPage=4 y el contador iniciará en 800

Este es el usé en donde ponemos el contador a cero

<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=1&quot;'>
<script type='text/javascript'>var contadorComentarios=200;</script>
<b:else/>
<script type='text/javascript'>var contadorComentarios=0;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=2&quot;'>
<script type='text/javascript'>var contadorComentarios=400;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=3&quot;'>
<script type='text/javascript'>var contadorComentarios=600;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=4&quot;'>
<script type='text/javascript'>var contadorComentarios=800;</script>
</b:if>
<b:if cond='data:post.olderLinkUrl == data:post.url + &quot;?commentPage=5&quot;'>
<script type='text/javascript'>var contadorComentarios=1000;</script>
</b:if>

JMiur  

Usa el método que más te convenga. Simplemente, insisto en que eso se puede hacer con JavaScript sin necesidad de colocar condiciones. Un ejemplo rápido:

urlPagina = unescape(location.href);
isPage = urlPagina.indexOf('?commentPage');
if(isPage > -1) {
buscarP = isPage + 13;
numPag = urlPagina.substr(buscarP);
// y aca se establece el valor inicial del contador
// numPag seria 1 2 3 etc
} else {
contadorComentarios = 0;
}

Bonzu Pipinpadaloxicopolis III  

Funciona, lo entiendo, es poco el código entoces me conviene ;).

Paula  

Hola JMiur:
Hace escasos días creé un blog y he leído muchos de tus consejos y trucos para mejorar. Por ello estoy trabajando en un blog de pruebas como sugeriste Blog de Paula (prueba).
En primer lugar quería preguntarte si puedo usar tu imagen de “suscribirse a los comentarios” (el RSS en perspectiva) en el contador que agregué debajo de Datos Personales. Busqué en la red pero me gustó más el tuyo para ese pequeño lugar.
En segundo lugar, probé con tus instrucciones para cambiar el fondo de los comentarios según sean pares o impares y creo que lo logré, salvo por la pequeña línea blanca que se ve tanto con Firefox como con IE. ¿Podrías ayudarme a quitarla? Por ahora, sólo pude probarlo en el primer post.
Noté también que cambia la posición de los números según el navegador, quedan más bajos en IE ¿qué sentencia debo agregar para que se vean iguales?
Muchas gracias desde ya, luego veré de sacar "dijo..." y colocar el ícono del autor del comentario.
P/D: estuve a punto de plantear la misma duda del comentario 10, pues se trata de un post de casi 2 años atrás y no estoy segura de si su planteo sigue activo o si conviene efectuar la consulta en una entrada más reciente. Es decir, si la fecha fuese visible creo que me orientaría más para pedir ayuda.

JMiur  

Paula:
No hay problema, puedes usar la imagen. descárgala y alójala en tu blog, siempre es mejor.

Esa línea blanca que ves es un borde. Puedes eliminarlo quitando esta línea:
border-top:1px solid #FFFFFF;
que está dentro de:
.comment-author {
...........
}

Para no tener problemas con la posición, tal como lo veo en tu prueba, podrías hacer esto. Primero, en la misma dfinición anterior, agrega:
position:relative;

Y luego, cambiamos esta otra:
.comentacontador {
display:block;
font-family:'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size:24px;
font-weight:normal;
position:absolute;
top:0;
right:0;
text-align:right;
width:30px;
}

de esa manera ubicamos el contador de manera absoluta con respecto a quien lo contiene y con top y right lo puedes ubicar, por ejemplo: right:5px; lo movera un poco hacia la izquierda.

Lo de la fecha y hora sigue vigente. Eso está en Configuración | Comentarios, hay una opción llamada Formato de hora de los comentarios. No es sólo hora sino también fechas.

Paula  

Muchas gracias por tus instrucciones, JMiur (¿Jorge?) ya las apliqué tanto en el blog de pruebas como en el “oficial”. Estoy estudiando la plantilla para aprender más sobre cómo mejorarla y adaptarla.
Como vi que los “espacios” entre cada parte de la misma (entradas, sidebar, comentarios, etc) son blancos, fui probando y agregué que los bordes superior e inferior de los comentarios fuesen blancos también y quité el espacio entre ellos. No es nada del otro mundo pero sirvió para sentir que voy entendiendo lo que hago ;)
Lo que aún no pude encontrar es qué parte determina al final del último comentario el color de fondo, antes del “Publicar un comentario en la entrada” que es tipo h4.
Bueno, es todo por ahora, sigo leyendo todos tus artículos a partir del índice y seguramente voy a preguntar mucho de ahora en adelante, perdona mi insistencia.

JMiur  

Paula:
El último comentario termina con &lt/dl> ese es el final de la lista de comentarios y luego viene algo así:

<p class="comment-footer"></p>

Que, como tiene CSS, se muestra como un rectangulo gris, si lo eliminas, desarparece ese rectángulo que se ve entre el último comentario y el texto Publicar un comentario en la entrada.

PD: Si, mi nombre es Jorge :)

Paula  

¡Muchas gracias! Ya lo saqué y te cuento que mientras esperaba tu respuesta se me ocurrió crear un favicon, como no encontré un post al respecto, miré tu código fuente, entré al Escaparate de Rosa, investigué y… ya lo puedes ver :)

JMiur  

Perfecto, Paula :D

Ami~  

¡Muchas Gracias por esta información!
Gem@ me envió para acá y me fue realmente útil.
Muchas gracias :D ~

SN.Systems  

Hola amigo la verdad que este post es el que buscaba pero honestamente no entendi nada no se cuales son los codigos a sustituir o eliminar pero muchas gracias...

AdeL  

Holas .
intente hacerlo y no mesalio :P
Saludos.

Maite  

Hola JMiur, me salen genial estos comentarios pero los pares me dan problemas en IE8, en firefox se ven bien:
http://plantillaoriginalultima.blogspot.com/
Incluso me dan problemas para darles propiedades, los márgenes y demás los estoy teniendo que modificar en sitios diferentes e impares, de hecho la fecha de los pares no consigo subirla... sabes donde tengo el problema?? Gracias :)
El avatar lo he metido en la caja del comentario guiándome por una entrada de Gema, de hecho vengo desde allí.

Maite  

No se si te he añadido la direccion de Gema :S, es esta
http://gemablog-.blogspot.com/2009/09/avatar-en-comentarios.html

JMiur  

El blog de pruebas parece inaccesible, deberás mandarme una invitacion para que pueda verlo, Maite.

MAI  

Perdona, pensé que estaba abierto. Ya está. Es aun peor... en IE solo sale bien el primer comentario, no solo fallan los pares...

JMiur  

Así tal como lo veo, al aprecer hay un error en la plantilla, algún DIV mal cerrado o mal ubicado que hace que se desbarate todo en IE porque en ese sentido, es más estricto. Fíjate si encuentras el error mirando bien y si no, deberías enviarme la plantilla porque no es algo que pueda verse online.

Maite  

Está todo revisado, voy a empezar de nuevo sin ocuparme de margenes ni nada en otra plantilla minima y si me vuelve a dar problemas vuelvo. No te preocupes, voy a intentarlo otra vez y te cuento. Gracias :)

Maite  

Aqui estoy otra vez. Lo he hecho en otras dos plantillas, veo una diferencia y es que en la mínima es codigo es dl expr:class='data:post.avatarIndentClass' id='comments-block' en vez de dl id='comments-block' y poco más, todas las veces me da error en IE.
Te mando una plantilla minima que solo está modificada con los códigos de esta entrada y así ves como queda, tal y como me sugerías.
Muchas gracias

JMiur  

Ok, la miraré. Esa diferencia de la que hablas no puede generar el problema.

Maite  

JMiur! por fin! a falta de darle ultimos retoques, pero sale genial. Mil gracias por todo incluida tu paciencia. Besazo!!! :D

JMiur  

Genial. Veo que me has mandado un mail, ahora lo leo :)

Gem@  

Voy preparando el cava y las copas para celebrar los comentarios de Maite :D
Decía que quería dejar la plantilla que se rendía, y mira hoy como salta!!

JMiur  

Salta y sigue saltando. Es el fruto de la "perseverancia" :D

¿Cuándo es la fiesta? :D

LdeListo  

Hola JMiur espero que estés bien, he aplicado perfectamente lo que comentas en esta entrada, sin embargo, me gustaría alinear la fecha de los comentarios a la derecha y no a la izquierda como se ve ahora. Me podrías ayudar?

JMiur  

LdListo:
Agrega entonces esta propiedad:

.comment-footer { text-align:right; }

Eso debería alimear la fecha a la derecha.

LdeListo  

Gracias por responder ya lo aplique y funciono perfecto, otra cosa, como hago para:

1.- Cambiar el formato de la fecha, justo ahora esta con el formato "22 de febrero de 2010" y quiero que se vea con el formato "22 febrero, 2010".

2.- Como puedo hacer para que la hora sea en formato am/pm

3.- Como agrego el texto "a las" entre la fecha y la hora

El resultado final me gustaría que quedara algo como "22 febrero, 2010 a las 03:30 pm"


Espero que me puedas ayudar con esto y muchas gracias eres el mejor :D

JMiur  

Los formatos de fecha y hora se seleccionan de las lista que provee Blogger, ya sea desde la Configuracion o desde Diseño, editanto el elemento Blogs. El dato es este:
<data:top.timestampLabel/>

Ana Laura  

Muchas gracias, JMiur, me ha quedado perfecto luego de modificar el formato para que se adecuara a la apariencia de mi blog, con tus etiquetas que identifican para qué es cada parte del código, ha sido muy fácil.

Como siempre, una entrada excelente.

Muchos saludos!!

JMiur  

Me alegro que haya funcionado, Ana Laura :D

Anónimo  

Jmiur! me encanto esta forma de ofrecer métodos para comentar :).. bueno el punto es decir gracias por el post, que en principio lo aplique en el blog con las notas de Rosa y al no encontrar como bajar los números llegue hasta aquí... aunque creo que no es la primera vez pero sí la primera en dejo un comentario se le agradece.

Saludos

JMiur  

Espero que haya servido :D

ritmosymelodiasecuador.blogspot.com  

Estimado amigo.

Es verdad aquí estuvo el problema
"ContarC"
no se por que razón tenía doble punto y coma, pero resulta que además los numeros se ven cortados en IE más no en Firefox, como podría arreglar ese detalle? y otra cosa de paso, cuando implementé el hack de la ventana modal con lightWindow para comentarios, al abrirla en firefox 3.6.6 la ventana no se centra como sucede en otras versiones e IE, y otro dato curioso es que al terminar de cargar la página en la parte inferior izquierda se abre una pequeña ventana pop up y que dice algo de así "gallery......", debo indicar que también uso win 7,

JMiur.
No solo valoramos sobremanera sus conocimientos, además su desinteresada y generosa ayuda siempre oportuna deja claro su calidad humana, actitud que compromete mi eterna y pública gratitud.

JMiur  

eso de los números es probable que sól oocurra en IE7 ya que en IE8 se ve normalmente. De todos modos, puedes probar agregando en esto a la clase que controla esos números:

comentacontador {
..........
line-height: 1;
}

No veo que la ventana de LightWindow no se centre, la veo centrada; la que he probado es la que abre los comentarios.

Esa ventana pop-up no sé que puede ser, no la logro ver en ninguna parte y en el código fuente no parece haber nada similar.

ADRIAN  

Gracias, arreglado los numeros.

Sin embargo dejo abierta la inquietud para lo de Firefox 3.6.6 o Win 7
http://2.bp.blogspot.com/_sGLM4G-FuAU/TCtQ4Iz08aI/AAAAAAAABUc/Kcj4CYK1SsM/s1600/VENTANA+POP+UP+DESCENTRADA.jpg

http://1.bp.blogspot.com/_sGLM4G-FuAU/TCtTqIYjwwI/AAAAAAAABUk/dKgiOKXbk50/s1600/IMAGEN+VENTANA+POP+UP.jpg

si puedes en algún momento descifrar que sucede estaré al pendiente.

un abrazo.

JMiur  

No tengo Windows 7 así que me es imposible probar eso pero, igual tengo una pregunta: ¿eso te pasa sólo en tu blog o en este, por ejemplo, ves que ocurre lo mismo?

ritmosymelodiasecuador.blogspot.com  

para nada JMiur, solo sucede en mi blog y con la versión 3.6.6, todos tus hacks funcionan a la perfección, justamente estoy respondiendo desde la ventana pop up.

si te fijaste al abrir el link se muestra como ventana+pop+up descentrada.

espero puedas hacer algo al respecto.

JMiur  

Eso lo complica más porque no le podemos echar la culpa al navegador y sigo viéndola centrada con el mismo navegador pero en XP.

Anónimo  

te agradezco mucho JMiur, ahora los comentarios se ven más ordenados, hay una cosa más que quiero cambiar. Quisiera que el texto de los comentarios este justificado y con una fuente diferente a la de la entrada, si me pudieras dar una ayudita y decirme que códigos usar para hacerlo y donde ponerlos te agradecería.

JMiur  

Fenris :
Fíjate si encuentras esta definición en el CSS

#comments-block .comment-body {
.......
}

Allí puedes agregar la justificación y cualqueir otro detalle de las fuentes

#comments-block .comment-body {
.......
text-align:justify;
}

Anónimo  

ahora si, ya quedaron más prolijos los comentarios. Gracias de nuevo :D

Pavelkapaz  

Muchas gracias por el tutorial... vamos a seguir revisando los otros post que tienes al respecto.
Saludos

Unknown  

Hola e hecho casi todo lo que dice pero nose a que se refiere colocar antes de HEAD o es que debo colocarlo despues de (]]>) podrias especificarlo porfavor y tampoco se donde colocar el SCRIP soy novato en esto y quiero mejorar mi blog que es
www.civilaxia.blogspot.com
espero tu ayuda y la agradezco de antemano

JMiur  

Buscas la etiqueta </head> y ambas cosas, style y script, las copias y pegas antes:

<style .............>
........
</style>

<script .............>
........
</script>

</head>

Unknown  

Hola de nuevo hasta ahora no puedo resolver este problema que tengo e revisado en tu pagina sobre los CSS y otras cosas mas con tal de darle la solucion y no puedo, te paso a explicar mi problema:

E cambiado todo lo que esta en letras naranjas tal y como indica pero:

1.- Nose donde colocar los estilos que colocas lo coloco antes de HEAD
y sigo con el problema
2.- El SCRIPT nose donde colocarlo me las e ingeniado en colocar en
alguna parte (con criterio) de acuerdo a lo que voy investigando
y tampoco le doy a la respuesta.

E intentado colocarlo en un GADGET como lo lei en el escaparate y solo consegui enumerar los comentarios pero no e podido darle los estilos de acuerdo a si es par o impar llevo casi una semana con esta encrucijada espero tu ayuda y te la agradezco de antemano te dejo mi correo porsiaca dortizc@uni.pe y si es necesario te puedo enviar mi plantilla.

Gracias una vez esperare tu ayudaaaaaa

JMiur  

En este blog, que es donde veo que está el script:
http://ubiqueme.blogspot.com/2010/08/inscribanse-aqui.html
lo que debes hacer es escribirlo tal y como e ve en la entrada, sepando cada línea; sino, no funcioanará.

Ese es el primer paso. Cambia eso y vulevo a fijarme.

Unknown  

Muchas muchas gracias amigo en verdad me has ayudado un monton y por fin lo logre no pense que el hecho de respetar los espacios y saltos de linea fueran importantes.

Gracias una vez mas

JMiur  

DUDSHAN:
No siempre es así, a veces no es necesario pero, en este caso, para ponerlo en una sola línea se necesitaría poner unos cuantos caracteres más.

Voy a cambairlo para evitar confusiones :-)

SMS Gratuito  

Hola!

Acabo de implementar el código y tengo algunos errores:

- La diferenciación de color en par e impar solo me la hace con firefox.
- Me aparece en la parte superior izquierda de la página "-->". Esto también sólo en firefox.
- No puedo cambiar la fuente de los números ni el tamaño, como mucho el color.

Agradecería cualquier consejo.

Muchas gracias por tu ayuda.

JMiur  

Revisa el código porque ahí se ve akguna etiqueta mal cerrada como --></style>

SMS Gratuito  

Era eso. Simplemente soobraba la etiqueta style.

Muchas gracias.

Magoplup  

Hola JMiur estas entradas han sido fantasticas gracias a ellas e podido colocar los comentarios con una mejor presentacion a la que tenian :) pero aun me queda mucho trabajo por hacer estoy trabajando en un blog de pruebas y me e encontrado con una forma para mostrar los avatares que me a gustado mucho no se si sea aplicable en blogger pero si me gustaria que las vieras la pagina en la que pudes ver estos avatarres es esta http://www.kernelweb.org/resaltar-comentarios-del-admin-o-autor-en-wordpress/

Si te fijas los avatares tienen una inclinacion dandole mas personalidad a esta area de el blog que para mi se a convertido en la mas importante de la presentacion soy nuevo en esto pero con estas guias quien no aprende? jajaja creo que todo el que quiere aprender lo hace y bueno este es mi blog de pruebas por si lo quieres mirar http://nuevaspruebasalea2.blogspot.com/2010/08/camila.html

Estare atento a tu respuesta espero que si sea posible aplicar ese estilo en los avatares gracias :D

JMiur  

Magoplup:

Me parece una idea muy divertida :D

Creo que puede hacerse con facilidad con CSS. Deberías colocarle una propeidad extra para rotar las imágenes. Deberías probar algo así:

#comments-block .avatar-image-container {
.......
-moz-transform:rotate(-10deg);
-webkit-transform: rotate(-10deg);
}

Eso, en Firefox y Chorme, para IE se requiere otra propiedad extra. Puedes mirar las diferentes alternativas en esta entrada y por supuesto, ahí puse un valor pero puedes usar cualquier otro.

Magoplup  

Muchisimas gracias ya lo e aplicado y queda bien no pense que responderias tan rapido =P muchas gracias seguire espiando tus entradas para seguir robandote :P cuando termine la plantilla completa te diria para si tienes tiempo la revisaras por que tiene problemas en IE6 de pronto se solucionen al cambiar el menu por que creo que eso fue lo que produjo ese error y aprovechando queria preguntarte lo siguiente:

El codigo elemental del que hablas

<b:includable id='comments' var='post'>
............
..........
.......
</b:includable>

tengo algunas partes repetidas de ese codigo diria que casi todo no deberia estar repetido cierto? por que si es asi tendre que eliminar lo que esta de mas en el revisando con una minima nuevesita gracias ;)

JMiur  

La velocidad ha sido casualidad ... la rima también :D

Respecto a IE6 te diria que ni lo mires, no tiene ningún sentido dar soporte a un navegador que ya es obsoleto. Si tienes IE, mira el blog con las versiones más actualizadas (está en la 8) y allí no debería haber problemas y si los hay, es probable que puedan ser solucionados de alguna manera.

Sí, el código elemental es ese y tal como dices, lo mejor es copiarlo desde una plantilla mínima.

Vuelvo a decir que me encantó tu idea de los avatares :D

Magoplup  

JMiur una ves mas yo por aca y aun cuando no es nada temprano lo que acabo de ver me a gustado tanto que estoy seguro que tu tambien la aplicaras en tu blog si es que fuese aceptado por blogger esperemos que si mejor velo tu mismo en esta pagina que me encontre de pura casualidad: http://www.grapitix.com/?p=14876#comments


Me refiero a las banderitas que aparecen al lado del avatar de cada comentarista si te fijas estas indican el pais desde el cual se esta haciendo el comentario... Crees que esto pueda ser implementado en blogger? :S en los lios que te meto :X

Y gracias por todo amigo :D

JMiur  

Me temo que eso no puede hacerse en Blogger porque no tenemos acceso a ningún dato de los comentaristas; es algo que ellos maneja internamente. Una pena.

Anónimo  

Does it work on IE7 and before???

JMiur  

En IE/ funciona perfectamente. En versiones anteriosre, no tengo idea porque hace mucho tiempo que no me preocupo por ellas.

El Directorio  

A ver, hace ya un buen tiempo que leo y releo este gran blog,pero algunas cosas he entendido y otras no. Estoy tratando de poner en practica esto de los comentariuos de colores y en numeracion,pero lanumeracion ya esta(masomenos) pero los coloresnada. A ver desearia que pudiesen quedar en un formato parecido al tuyo,pero no se puede, Espero que puedas pasarte por mi blog de pruebas( esque es igual formato que el original, solo que aqui practico)Y ver que me pasa. Porque he colocadotodo como tu indicas y nada.

http://www.monoraciones.blogspot.com/
Saludos y gracias de antemano, espero mepuedas explicar y ayudar por aqui.

JMiur  

El primer paso es fundamental y es el que no veo en esa plantilla, debes agregar el DIV que nos permita darle un nombre único a cada comentario:

<div class='' expr:id='data:comment.id'>
.....
</div>

Sino, es imposible establecer clases ya que no hay ningún otro elemento posible.

El Directorio  

A ver gracias por el dato... no me habia dado cuenta de eso, aunque (quizas me equivoque) creo que en Firefox no salio asi, pero bueno...

Ahora el problema son los numeros... Pues salen a lado del nombre, y no al margen del comentario. Ademas estan pequeños. Y otro dato (que agradeceria) Una pagina donde ver una gama de colores con sus respectivos codigos para que combinen con mi plantilla. Bueno, disculpa por ser muy pregunton, pero hago esto luego de varios intentos fallidos. Gracias

JMiur  

Tienes que revisar la forma en que está escrita tu plabtilla porque tiene un error en la aprte del estilo, probablemente, has colocado etiquetas dentro de <b:skin> </b:skin>, etiquetas STYLE o alguna otra (una etiqueta SCRIPT parece). Todo eso, hace que las reglas definidas a continuación no se tengan en cuenta y por l otanto lo ves así..

¿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