JMiur [E]

Ayer, Blogger anunciaba que ya estaba disponible una nueva mejora, la posibilidad de mostrar el avatar de los usuarios en los comentarios, algo que hacía tiempo se lograba mediante un truco que dejó de funcionar y es probable que haya muchos que no se hayan dado cuenta que existe ya que solemos manipular esa parte de la plantilla.

La imagen a mostrar es la que hayamos agregado a nuestro perfil (Escritorio | Ver perfil | Editar perfil | Editar foto) si es que hemos agregado alguna, el ícono de Blogger si no subimos ninguna , el ícono de OpenId si se está usando ese método de ingreso o una imagen en blanco si es un usuario anónimo o utiliza su dirección URL.

Para que esto funcione, primero que nada deberemos verificar que en la Configuración | Comentarios, esté marcada la casilla correspondiente:

¿Mostrar imágenes de perfil en los comentarios? No

Como elemento adicional, en la Vista Previa de los comentarios aparece un enlace Agregar foto para hacerlo directamente desde allí en caso de no tener ninguna.

Hasta acá todo es simple pero, lo complicado es que la mayoría de las plantillas no poseen el código necesario ya que es algo que sólo aparece en los blogs nuevos y, para colmo, probablemente hemos agregado mucha personalización en ese sector así que lo mejor es comenzar desde el código elemental.

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<a expr:name='"comment-" + data:comment.id'/>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>

<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>

<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/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

No va a ser sencillo explicar esto y de aquí en adelante hay que ser prudentes así que, ya mismo, antes de intentar nada, hay que guardar la plantilla y tener un backup. Mejor aún si todo se hace en un blog de pruebas con una copia de la plantilla original.

En las entradas Blogger y los comentarios 1 | 2 | 3 se habla del contador de comentarios y de una clase CSS para mostrar los comentarios pares e impares con fondos diferenciados. Ambas cosas siguen funcionando normalmente.

<dl expr:class='data:post.avatarIndentClass' 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'>

<a expr:name='&quot;comment-&quot; + data:comment.id'/>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<span class='autorcomentario'>
<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>
</span>
<data:commentPostedByMsg/>
<!-- 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'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'><data:comment.timestamp/></a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
<!-- establecemos la clase del comentario -->
<script type='text/javascript'>ContarC(&#39;<data:comment.id/>&#39;)</script>

</div>
</b:loop>
</dl>

Los distintos trucos para identificar a los comentaristas ya no tiene mucho sentido si se usan las imágenes de los perfiles aunque habría que mejorar un poco la visualización de algunos avatares y sobre todo, ver si es posible usar alguna imagen por defecto que reemplace las imágenes inexistentes. Habrá que estudiar el asunto.

Las definiciones CSS que controlan esto son cargadas por Blogger mismo así que si queremos modificarlas, deberemos sobrescribirlas agregando el estilo debajo de <body>. Estas son las propiedades por defecto:
#comments-block.avatar-comment-indent { /* es la lista completa DL */
margin-left: 45px; /* esto puede complicar la salida de los datos */
position: relative;
}
#comments-block.avatar-comment-indent dd { /* */
margin-left: 0;
}
#comments-block .avatar-image-container { /* el contenedor de las imágenes */
height: 37px;
left: -45px; /* aparentemente compensa el margen */
position: absolute;
width: 37px;
}
#comments-block .avatar-image-container img { /* las imágenes tienen un borde gris */
border: 1px solid #CCCCCC;
float: right;
}
#comments-block .avatar-image-container.avatar-stock img { /* cuando no hay imagen y se usan iconos normales */
border-width: 0;
padding: 1px;
}
En lo personal, eliminé esos márgenes y la posición absoluta. Además, agregué un padding, un fondo y un borde en las imágenes porque sino, quedaban fuera del área de comentarios o simplemente no se veían:
#comments-block .avatar-image-container {
float: left;
position: static;
}
#comments-block.avatar-comment-indent {
margin-left: 0;
}#comments-block .avatar-image-container img {
background-color: #VALOR;
border: 1px solid #VALOR;
float: none;
padding: VALORpx;
}
Sin duda, habrá mucho más que arreglar.

201 comentarios:

Anónimo  

Veo que ya lo has implementado en tu blog :D el resultado está bastante bien. Una pregunta el tamaño de los avatares se puede cambiar por ejemplo a 75x75px ?? es que me parecen demasiado pequeños los avatares.

Salu2!!

Bonzu Pipinpadaloxicopolis III  

Le arreglaste mucho, gracias‼

Ivoc  

a mi no me sale el código "elemental" como lo tenes vos... y tengo la opción de mostrar imágenes chuliada...
de pronto por tener el formulario de los comentarios incrustados no funciona o q?

bueno igual esta bueno el articulo

JMiur  

Espinelli: Por ahora n otengo respuesta a eso, la imagen la coloca Blogger mismo y su tamaño no es parte del CSS sino de la etiqueta IMG generada así que, tal ves, usando JavaScript, no se :D

Bonzu: Costó trabajo. Demasiado.

Ivoc: El código que llamo elemental es el que viene en una Plantilla Mínima de Blogger. El código de nuestras plantillas puede variar y a veces bastante, ese es el problema. Si logras identificar ese sector que debería comenzar con <dl ... y terminar con </dl>, lo lógico es copiarlo por las dudas y luego reemplazarlo íntegro. Aún así, el resultado dependerá de cada plantilla.

Anónimo  

Hola, que pequeña pero que buena mejora, yo también quisiera saber como hacer más grande el ícono. Ya cambie el 16px que aparece en el código y no cambia de tamaño. Porqué será?

Ivoc  

Gracias JMiur

ya lo arregle... sustituí todo el código

gracias de nuevo.

Emerald  

Hola JMiur, hace rato que estoy destripando mi plantilla para ver cómo era esto de los comentarios, está tan revuelta que ni sé cómo funciona!:D

En mi blog de pruebas parece que funcan, pero al cambiarle algo del código me apareció un letrerito que antes no tenía (en algún momento saqué)ese de "enlaces a esta entrada", me dirías dónde toco para volver a sacarlo??
Gracias y un abrazo!!

Ariane  

só vim mostrar minha 'carinha' aqui :) ontem fiquei olhando o código, mas já era tarde e tive que trocar o avatar para que aparecesse. A imagem anterior era grande, talvez por isso não aparecia. A url da imagem (no código) era diferente da url da imagem do meu perfil e não dava em lugar nenhum. Enfim, agora acho que está ok e talvez no final de semana consigo mexer um pouco e ver o que é possível fazer. Estes presentes do Blogger...:X abraços!

Admin  

Hay JM me encanta, pero que dificil... :( como voy a hacer esto con la plantilla que tengo, que no tiene todo ese código, no se si lo aceptará ni donde va :'(
Me hice otro blog de pruebas con la Mínima y esa si tiene todo, salen de lo mas lindos los avatares :D
Pero no se si podré modificar las plantillas de los dos blogs, ni siquiera el que tiene la Miníma de base :(
Hay veces que me canso de todo y empezaría todo de nuevo, aparecen nuevas cosas y casi todas me gustan pero soy incapáz de ponerlas en los blogs...
Ya viste la plantilla que puse en Te Propongo? Es una modificada y parece no querer aceptar algunos códigos, me está volviendo loca, y todo por no saber modificar yo misma y a mi gusto una de cero...

JMiur  

Mauricio:
Aparentemente, esa imagen de 16x16 que se ve en el código es el que se utiliza cuando no está activada la opción Mostrar Avatares.

Luz de Luna:
"Enlaces a esta entrada" debe ser la parte de backlinks. Podría no mostrarse desmarcando la opción en el gadget del Blog en la parte de Diseño. El código variará pero la parte fundamental es esta:
<b:include data='post' name='backlinks'/>

Ariane:
Creo que tienes razón, que hay imágenes que no son mostradas pese a estar en el perfil y esa puede ser la razón. Habrá que ver cómo reolver eso porque queda feo un espacio en blanco.

k_nelita:
Sí, no te preocupes, sólo es cuestión de buscarle la vuelta. en la plantilla de FolkTango funcionará y sólo habrá que acomodar un poco el CSS, nada grave. Si todavía tienes el enlace, aún está en ese blog de pruebas y funciona aunque hay que ajustarla.

Unknown  

mira tu, con razón ayer no figuraba Jmiur en los coments, estabas jugando :) buen sábado

Marcos Gabriel  

Eu estou tendo uns problemas de alguma forma meus avatares não aparecem hehe , no cineHQ (meu blog principal no momento) não funciona , creio eu que algum script possa esta interditando pois , os avatares aparecem se eu desativar o javascript do navegador ...

ate a area dos avatares aparecem mas .. as foto quesao boas nada ..

Se voce pode dar uma olhada seria grato \o/

Iván_RG  

JMiur eres un fiera!!!
Yo también estuve anoche "peleándome" con el CSS para averiguar cómo manejar la posición de la imagen, pero no llegué a la mitad de lo que has conseguido tu. Nada, nada, eres un fiera!!
Ya está colocadito en mi blog.
Saludos!!

Admin  

Hola JM, acá estoy con la nueva plantilla, al final estoy modificando la que puse de pruebas, que funcionan los avatares.

Le estoy poniendo un diseño similar a la que tengo ahora en Te Propongo (me estoy copiando ;) )Pero tengo algunos inconvenientes como por ejemplo las fuentes de la fecha y otras mas me salen en blanco y no se ven... En fuentes y colores si modifico eso me cambia el color de los títulos de las sidebares que los quiero blancos.

Si querés darle una mirada el blog es: Pruebas

Y eso sin hablar de todo lo que tendría que modificar para los comentarios... uffff que trabajo :S

El publicado por... las etiquetas en el footer de los post también sale en blanco, bueno para que te voy a contar, miralo y me decís algo si?
Saludos ;)

JMiur  

Graciela: Es posible y sigo en el tema, destuyendo el blog de tanto en tanto :D

Marcos Gabriel: ¿Hay algún post donde pueda verse? Es que no encuentro ninguno.

BanakaBanaka!!: Bastante trabajo da este coso, seguimos experimentando, alguna cosa más he descubierto así que veremos :)

Ivoc  

un pregunta JMiur, q pena tanta molestadera!!

la imagen de los usuarios anónimos (o que no tienen), se pone sola??, o hay q agregarla de alguna forma, es q no me sale

gracias

Vku  

Hola JMiur

Hace tiempo que quería hacer esto.

No lo podría haber echo si tu expoliación.

En mi plantilla tuve que agregarle al final otro cierre </dl> mas lo marcado en color.

Lo de el tamaño de la imagen se cambia agregando al CSS

.delayLoad{height:50px; width:50px}

Gem@  

Vayamos paso a paso, es mucho trabajo y arriesgado.
¿Imaginas? debo poner los comentarios como si fuera una plantilla nuevita, luego ir implementando todo uffff.
Me verás por aquí, seguro :O

Manuel de la Fuente  

¡Pero qué excelente noticia! La zona de los comentarios es con mucho la parte más horrible de mi blog; agrego esta entrada a mis marcadores para aplicarlo cuando tenga tiempo, que ya veo que queda muy bien.

JMiur  

k_nelita:
La fecha parece que está dentro de una imagen pero no sé cómo es la diagramación de es nueva plantilla, para que veas dónde aparecerá, camboia esto:
#fecha {
........
height:82px;
margin:0;
}
El color de eso que no ves lo cambias acá:
.post-footer {
........
color:#COLOR;
}

Ivoc:
La imagen de los anínimos la colcoa Blogger, usa el ícono "normal". En esta entrada acabo de mostrar un poco más de lo que fui descubriendo.

Vku:
Lo de el tamaño de la imagen lo logré por otro método así que ya tomo nota de tu idea a ver cuál me conviene. Se ve que hay varias formas de conseguir lo mismo.

Gem@
Si, lo mejor es directamente, cambiar el contenido completo y luego agregar los detalles como contador, etc ya que seguramente, tienes algo similar a lo que yo tenía y toda esa parte de personalización por autor es innecesaria o por lo menos, puede esperar :D

Roudy Capella  

JMiur. En un blog de pruebas tengo los comentarios numerados. Añadi el código para que se vea el avatar en el comentario. No he conseguido separar el nombre de la imagen y que el comentario quede alineado debajo de la imagen como lo presentas en Vagabundia. El Blog de pruebas. Gracias

Admin  

Gracias JM, ya cambié las fuentes del footer, ahora se veeeeen :D Lo de la fecha como calendario lo suprimí, con lo que me dijiste salió la imagen, pero es muy grande, queda allá arriba sola y sin la fecha dentro, un desastre, así que dejé la fecha clásica.
La plantilla es una Miníma, sencillita por así decirlo :D
Ahora hay mas ehh, los títulos en los comentarios no salen, ninguno, es el color de la fuente (que por el fondo no se ven)que tampoco se de donde se cambia eso :S
Ufff falta tanto todavía :O

Mil gracias ;)

Marcos Gabriel  

Pode tentar , comentar sinta se livre , mesmo que seja so para da uma olhada , pode comentar quanats vezes quiser , textos aleatorios mesmos ...

So para voce ter uma ideia entende rsrsr , qualquer coisa eu excluo depois...

mas de qualquer forma comentei uma vez nesta postagem, se puder me ajudar .. =/

JMiur  

Roudy:
Ya lo veo. Intentemos lo siguiente, debemos poner alguna clase CSS para controlar el nombre del comentarista. Fíjate si encuentras algo así:

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

Rodeamos todo eso con un SPAN:

<span class='autorcomentario'>
<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>
</span>

Y ahora, donde están las definiciones CSS agregas esto:

.autorcomentario {line-height:40px;padding-left:10px}

Ahí, con line-height controlas la separacion vertical y con padding-left la separación horizontal.

Para el contador, deberías cambiar el margen que ahora dice:

.comentacontador {
...
margin-top: -10px
}

y poner 0 o eliminarlo directamente.

Hecho eso, (sobre todo lo primero) veremos si hay algún otro ajuste.

JMiur  

k_nelita
Si, eso me pareció a mi tambien, esa imagen no combinaba con la plantilla.
Los títulos de los comentarios tiene el mismo problema, están acá:
#comments h4 {
.........
color:#FFFFFF;
}

Marcos Gabriel:
Acabo de hacer la prueba y es tal como dices, no se muestra la imagen. Sin embargo, aunque el código está allí, la imagen que carga es una en blaco. Es raro.
Si dices que deshabilitando JavaScript se ven ¿no podrías ir deshabilitando algunos scripts hasta detectar cuál es el que está interfiriendo? Es que no se me ocurre ninguna otra solución.

Anónimo  

A mi se me hecho todo a perder Sniff

Roudy Capella  

Gracias JMiur, funcionó a la primera.

EM2.0  

Esto no se hace joer, ahora vuelta atráscon lo que me costo que se viera un avatar para autor y otro a los demás ahora vuelve a cero, volveré con problemas fijo.

Jorge Verón Schenone  

Hola JMiur, cómo estás !, quería comentarte algo, tiempo atrás me había tomado el trabajo de combinar las rutinas que mostrabas en: "http://vagabundia.blogspot.com/2009/05/personalizar-los-comentarios-del-autor.html" y "http://vagabundia.blogspot.com/2009/03/identificando-los-autores-de-los.html", modificando, además, los iconos que aparecían por defecto. Sin embargo, éstos nuevos cambios en el código de la plantilla, hicieron que "desaparecieran" los comentarios (personalizados) que había realizado como autor. Además de agregar código nuevo, han modificado algo del anterior (quizás la forma de detectar el perfil de usuario, aún no pude dedicarle tiempo). Un abrazo ! Jorge

JMiur  

El cambio de un sistema a otro no es obligatorio, si se quiere seguir manteniendo el sistema anterior, sea cual sea, basta desactivar la opcíon de mostrar el avatar en la Configuración de Blogger.

Jorge: Aún no me puse a verlo en detalle así que no sé si es posible compatibilizarlo con el truco de personalizar los comentarios del autor. Imagino que si pero no lo aseguro. Lo de identificar a los autores, el avatar diría que lo reemplaza de alguna manera.

Como dije antes, basta desmarcar la opción para que los avatares no se vean y se use el sistema anterior así que en ese sentido no debería haber problemas.

Habrá que ponerse a leer todo otra vez y ver que cosas puden hacerse :-)

Unknown  

Hola JMiur, me encantaria poner los avatares en mi blog, pero parece que he eliminado algun codigo en esa parte del blog porque no veo como ponerlos, serias tan amable e indicarme como hacerlo? muchas gracias de antemano.

JMiur  

ΜigueŁ:
Lo sencillo es buscar lo que ahora hay desde ese <dl ....... hasta el </dl> y reemplazarlo por el código original que da Blogger y que es el primero que muestra esta entrada. Eso hice yo.

Play  

Hola JMiur reemplace el codigo por el elemental que tienes tu en un Blog de pruebas y mira no sale la imagen, sale en blanco aparte de eso el comentario no sale en linea.

JMiur  

cargohe:
No veo que se haya cambiado el código, sigue teniendo la misma estructura:
<dl id="comments-block> ....... </dl>
en lugar de la nueva.
<dl expr:class='data:post.avatarIndentClass' id='comments-block'> ....... </dl>

cargohe  

ahora si gracias, como le hago para que en anónimo ó URL salga una imagen predeterminada y no salga en blanco y cuando no tiene imagen el perfil salga una imagen mas grande por que mira que sale es un icono pequeño.
http://pruevaplan.blogspot.com/2009/09/jdjyj.html

Jorge Verón Schenone  

Gracias por la información. Volví a la configuración anterior -sin imágenes de perfil de usuario en los comentarios- (ahora funcionan normalmente las rutinas personalizadas), como toda novedad, hay que estudiarla detenidamente antes de aplicarla. Un abrazo ! Jorge

Anónimo  

Hola Jmiur.
He estado revisando mi plantilla pero ni luces del código que muestras acá. Traté de implementarlo en la plantilla pero tampoco funciona. :X

Me gustaría implementarlo pero no sé como :/

JMiur  

c@rgohe: Fíjate en la entrada siguiente. Allí está todo lo qe he probado hasta ahora.

Jorge: Esta "novedad" es de las que más me ha causado problemas así que entiendo perfectamente los dramas que produce :)

Nav's: En tus dos blogs veo el código anterior y no el nuevo. Sugiero siempre lo mismo, reemplazar todo el sector:
<dl expr:class='data:post.avatarIndentClass' id='comments-block'> ....... </dl>

Anónimo  

voy a comerme a los de blooger, no iba ha hacer nada con historia del vestir pero me picaste el gusanillo y lo intente pero nada los avatares no se centran se pegan a lo escrito, si no salen cortados y ademas es tan chula mi plantilla que si escribo algo despues de body como explicaste se queda escrito en la parte de arriba del blog y muchos codigos que dices ni existen en ella te lo digo porque le va a pasar a más de uno que tenga plantillas poco convencionales al ser modificaciones de wordpress yo lo dejo todo como esta porque ya me he liado lo suficiente nada te mando un saludito y gracias por el trabajazo que haces.

José GDF  

He detectado otro problema con los avatares. Está relacionado con las entradas importadas.

Es muy largo de explicar. No suelo hacer esto, pero por una vez, si me lo permites, voy a enlazar a una entrada de mi propio blog donde lo explico con detalle y con imágenes capturadas, porque me gustaría saber qué piensas del asunto y qué posible solución puede haber al problema, si es que la hay.

Me pasó donde la plantilla de pruebas, en el lugar donde estoy rediseñando mi bitácora. Importé unas entradas para pruebas y ahí es donde me di cuenta.

En el blog real pude implementar lo de los avatares sin problemas.

Un saludo.

JMiur  

Desconozco por qué pasa eso- Imagino que es porque cada comentaro está asociado con un blog específico en lugar de estar asociado con un usuario. Algo similar ocurre cuando vemos que los avatares de un mismo comentarista varían de acuerdo con el momento en que fue realizado el comentario. Misterios de Blogger que ha complicado lo que debería haber sido simplísimo.

José GDF  

Me parece que ahí está la clave, en el momento y el lugar. Blogger debe asignar un avatar a un usuario concreto en los comentarios en que lo tuvo puesto en su perfil en un instante concreto, en un determinado blog, identificado por su ID (cambiar la URL intuyo que no serviría de nada).

Salvo que desde Blogger hagan algo, que no creo, la única solución que veo a esto es... ¡Dejar las entradas donde están!

Gracias por tu opinión ;)

Gem@  

Es curioso este último caso de José GDF y había pensado eso mismo que quizás Blogger relaciona los comentarios con la ID de cada blog, con el avatar no termino de entender como no relaciona cada avatar con su auto. porque independientemente que se cambie de avatar el autor del blog sigue siendo el mismo :O
A lo mejor después de todo Blogger es más listo de lo que aparenta.

Admin  

Se dieron cuenta también que en las entradas antiguas si teníamos otro avatar pone ese? El antiguo, no lo actualiza.
Algo de inteligencia debe tener :D Si cuando publicamos ese post teníamos un avatar, hace unos meses por ejemplo y después lo cambiamos, se muestran los dos en las diferentes épocas.
Al ser algo nuevo una podría pensar que iba a poner el avatar actual en todos los post, pero no :o

JMiur  

Exactamente, José. Desconozco los detalles pero algo así debe ocurrir.

Gem@: No, yo tampoco entiendo por qué no relaciona el avatar con el perfil y listo. A ellos les evitaría el trabajo de crear códigos y a nosotros el trabajo de entenderlos :D

Gem@  

Precisamente por eso hace pensar que es algo que está en manos de ellos pero no las nuestras.
Por cierto J.Miur está muy coqueto el nombre a la derecha del título, está usted rejuveneciendo :D

JMiur  

Gem@:
Así es, probablemente, ellos ajusten esos detalles o los dejen así ¿quién sabe como piensan?
Coqueto ... nunca lo hubiera calificado asi :D Ni sé para qué está si total el único que escribe acá soy yo :D
Y si, hay alguna idea dando vuelta para limpiar un poco y probar algo ... veremos si funciona, soy bastante reacio a los cambios y retoques :D

Gem@  

¿Limpiar? ¿pruebas? impaciente estoy :D

JMiur  

:D Veremos si logramos algo y si me sobrepongo a estas enormes ganas de no hacer nada de nada :D

SuperKyubi  

Hola...! JMIUR yo segui todos los pasos bien.. y no aparese nada y 1 vez borro todos, quisiera ver si puedes ayudar tu mismo mi correo es : dark_uchiha24@hotmail.com y mi blog es http://rasengansharingan.blogspot.com/ Bueno espero contar con tu ayuda..

gracias..!:D

JMiur  

SuperKyubi:

Debes cambiar el CSS tal como dice este post o fijarte en esta entrada para más detalles.

Un ejemplo, si agregas esto después de <body> los verás:

<style>
#comments-block .avatar-image-container {
float:left;
padding-right:10px;
position:static;
}
</style>

Manuel de la Fuente  

Como te había dicho, en todas las plantillas que había tenido la zona de los comentarios era la parte más horrible; ahora gracias a ti y a las tres entradas que publicaste sobre el tema se ve todo precioso, así sí dan ganas de comentar. :D

JMiur  

Vamos mejorando ... creo :D

Nico  

Se nota una diferencia con los avatares en los comentarios. Pero a mi gusto, deberían darle mas atención al formulario de comentarios permitiendo personalizarlo más y que funcione siempre.

Por las dudas, mis comentarios los envio al viejo estilo :P

JMiur  

Va mejorando pero no hay duda que esa es la parte crítica :)

Admin  

JM me leí los tres post de los comentarios, lo de numerarlos y todo eso, pero no encuentro, porque se que la hay, la parte donde cambiar el fondo, el color de fondo de los comentarios, la numeración no me interesa, no son tantos los comentarios que tengo, pero si el color que como te dije en otro comentario, los tengo con jquery y es incompatible con scriptaculos.
Creo haber visto lo del color de fondo, pero no lo encuentro o está mezclado con la numeración y no lo entiendo :S
Me das una manito? ;)

JMiur  

Es que, para mostrar colores alternados, requieres del contador aunque no es necesario mostrarlo. De este post, debería usar todo excepto esta parte que es la que muestra el numero:

<!-- el código del contador -->
<span class='comentacontador'>
.............
</span>

pero el resto si.

Admin  

Gracias JM, ya lo estoy haciendo en blog de pruebas y va bien, ya que estoy le dejo el número, pero me queda fuera del recuadro del comentario, arriba para ser mas precisa, como lo bajo?
Ya empiezo a pasar todo al blog original...

Admin  

Ya está JM lo logré!! :D Pero el numerito me queda entre comentario y comentario y en el primero queda arriba del cuadrado de color ¿?
Donde tendría que corregir eso? Y ponerlo en negrita? Le achiqué el tamaño al número pero no está en negrita, casi no se ve, salvo porque sale fuera de sitio :S

JMiur  

Puedes eliminar el numero si quitas esa parte que te dije antes; no hace falta que se muestre.

Admin  

Al eliminar el código del contador, esa parte que es un script se me van también los colores de los comentarios, o mejor dicho me quedan todos del mismo color, no reconoce los pares e impares :S
Toda esa parte que decís tengo que eliminar o me equivoqué? Lo mas probable no?

Admin  

Ahhh bueno... ahora la hice peor jaja :D Le saque solo la parte que decís, -- el código del contador --
span class='comentacontador'
span
Y ahora me sale el numerito en rojo y pegadito al nick del comentarista.
Le volví a poner la parte del script que era lo que me dejaba todos los comentarios del mismo color y le saqué lo que te puse arriba que es lo que me decías o no?

JMiur  

Sorry, el error fue mio. De esto:

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

sólo debes dejar esto para que no se vea pero sume y así se veran colores diferenciados:

<script type='text/javascript'>
contadorComentarios=contadorComentarios+1;
</script>

Admin  

Listo JM disculpado ja ja :D Alguna vez te tenía que tocar no? Lo de equivocarte digo ;)
Quedó bárbaro!!
Mil gracias :P

JMiur  

k_nelita
¿Alguna vez? Ohhhhh son cientos de veces y seguirá ocurriendo. Amen :D

Kesua  

Hola JMiur,

Ante todo felicitarte por el blog, buen trabajo!

He añadido el avatar a mi blog y tengo algún problema, te cuento:

tengo aplicado el truco de numerar los comentarios pares e impares, pero quisiera saber como ampliar el recuadro de los comentarios para que se adapten a la plantilla y también solucionar el problema de que la imagen del avatar salga tal como tu la tienes.

Para que veas el problema visita mi blog apeupermontserrat entrada llibre de visites y ahi tengo algún comentario y podrás ver el problema.

Gracias por tu ayuda.

Josep M.

JMiur  

apeupermontserrat:
No sé exactamente el resultado que quieres obtener pero agrega el CSS tal como dice el post para sobrescribir los datos que pone Blogger de forma automática. En esta entrada hay más información. Básicamente, debes colocar:
#comments-block.avatar-comment-indent {margin-left:0;}
#comments-block .avatar-image-container {float:left;height:37px;left:0;padding-right:10px;position:static;width:37px;}
para que el avatar se "meta" dentro del recuadro de comentarios.

Kesua  

Hola de nuevo JMiur,

He podido colocar el avatar dentro del recuadro. Pero me gustaria que quedara como te queda a ti. El nombre del que deja el mensaje al lado de la imagen y que el el texto comience debajo de la imagen. A mi me sale el texto alrededor de la imagen.

Gracias por la ayuda

Josep M.

JMiur  

Agrega entonces una propeidad más:

comment-body {clear:both;padding-top:10px}

De esa manera, el texto ppraecerá debajo de la imagen. Tanto allí como en lo otro que te dije, puedes cambair los maddings y margins a gusto para separar más o menos cada cosa.

Kesua  

Ya he conseguido poner el texto debajo de la imagen, pero no he podido centrar el autor del comentario junto al avatar, me queda al lado pero arriba.

Una pregunta mas, que hay que hacer para centrar el el recuadro de dejar comentarios.

Gracias por tu paciencia y ayuda.

JM

JMiur  

Intentemos esto:

#comments-block dt {
line-height:4;
margin:0;
}

Con line-height puedes centrar el contenido verticalmente.Verifica como se ve en IE.

Eso, hará que el padding del contenido del comentario sea innecesarrio así que podría quitarse:

#comments-block.avatar-comment-indent dd {
margin-left:0;
padding-top:0px;
}

Diego Arenas  

Hola Jmiur creo que hay un problema con el avatar de autor en los coemntarios hasta aqui en tu ultimas respuestas lo veo no aparece la foto de autor hace pocos dias paso lo mismo en mi blog solo aparece una o varias veces en las respuestas de x temas y ya no sigue saliendo mi foto de autor hecha un veo a ese detalle o me equiboco ?

Ejemplo:

http://arenasgamerr.blogspot.com/2009/09/se-busca-colaboradores-uploaders-para.html

PD: Que estara pasando ? :S


Diego Arenas

JMiur  

Diego:
Hay un problema con todos los avatares en todos los blogs. No toques nada porque no es problema de plantillas sino de Blogger. Habrá que esperar. Por el momento, nada han dicho al respecto.

Diego Arenas  

ahhh gracias por la respuesta JMiu entonces sera esperar muchas gracias por tu pronta respuesta saludos cordiales... ;)


Diego Arenas

José GDF  

He observado que sólo pasa con comentarios, propios y ajenos, con fechas anteriores al 8 de octubre.

Lo sé porque tengo el formato de fecha completo en los comentarios y sólo los que pasan de esa fecha son los avatares que no se ven, pero que antes se veían, lo recuerdo perfectamente.

Yo creo que están haciendo algún arreglo, ¿quizá la posibilidad de que se vea la imagen de perfil actual, en vez de quedarse grabada la que se tiene en el momento de comentar? Puede ser...

Como bien dices, no nos queda más remedio que esperar a ver qué pasa.

Kesua  

Bien! lo hemos conseguido, bueno todo el merito es tuyo.

Para dejarlo perfecto solo me falta centrar el rentangulo de quieres dejar un comentario... probaré haber si lo encuentro pero una ayuda extra me vendra bien.

Ahora intentaremos crear una imagen para la visitas anonimas como tienes en el blog... haber si me salgo.

Muchas gracias por la ayuda.

Josep M.

JMiur  

José GDF: Es muy raro lo que pasa. No parece tener lógica.

apeupermontserrat: Una posibilidad es algo así.
#comment-form {
clear:both;
margin:0 auto;
text-align:center;
width:auto;
}
#comment-editor {
margin-left:20px;
width:500px;
}

Pongo 500 de ancho para que pueda verse la diferencia. El centrado no es perfecto así que puede compensarse com ese valor de margin. Y debes sacarle el parámetro width al IFRAME.

Kesua  

Ja está, ha quedado perfecto.

Para poner imagen en los mensajes anónimos que post tengo que mirar?

Gracias por la ayuda!

JMiur  

Puedes ver esta entrada y esta otra pero, ten en cuenta que en estos momentos, hay un porblema en Blogger con eso así que muchos no se ven.

v  

Hola he conseguido poner la imagen en el avatar , habiendo quitado antes otro de los métodos que hay pero ahora mi problema es que ha desaparecido el fondo de los comentarios pares e impares.

JMiur  

Vanesce:
Me parece que puede tratarse de un error en la transcripción del código. Fíjate en esta línea:
<script type='text/javascript'>ContarC(&#39;;<data:comment.id/>&#39;;)</script>

hay unos punto y comos de más, debería ser así:
<script type='text/javascript'>ContarC(&#39;<data:comment.id/>&#39;)</script>

v  

Muchísimas gracias, si que era eso !!

Gem@  

El problema se va alargando dudo mucho que le estén buscando solución.
Por otra parte he comprobado que no hay una fecha especifica desde que dejaron de aparecer ya que el avatar no lo muestra en fechas antiguas, luego en posteriores si lo muestra y en más recientes tampoco.
Voy a mandar señales de humo en Twitter otra vez :)

JMiur  

Es verdad, no parece tener lógica y lleva demasiado tiempo sin referencia alguna. No se les puede dar nada nuevo que enseguida lo rompen :D

Gem@  

Eso es lo que más me disgusta, si se ha roto algo no es la primera vez y en todos sitios ocurre ¿pero por qué no se explican? ¿por qué no dan unos argumentos? mira Fileden y tantos sitios que informan a los usuarios de las averías, del por qué y el hasta cuando.
En esos detalles es donde se ve que no actúan profesionalmente.
Un BLOG NOTE o como se llame, para eso si tienen tiempo :(
Me quedé corta pero bien :)

JMiur  

Se toma debida nota de su protesta :D Pués, mira, tardaron cinco dias en reconocer el error y punto, ni una palabra más.

Estuve mirando el código generado, ahí hay algo diferente a lo que había antes.

Kesua  

Estoy haciendo retoques para que salga una imagen en los comentarios anónimos y cuando intento hacer un comentario como anónimo se abre la ventana de vista previa y pide ingresar un codigo pero la ventana sale cortada. Que hay que hacer para solucionar el tema.

Gracias

apeupermontserrat

JMiur  

Me da la impresión que es porque utilizas la verificación de palabras y el espacio disponible en escaso.

Dos posibilidades. En el IFRAME del formulaario de comentarios, ahora dice:
scrolling='no'
cambiala por:
scrolling='auto' o por scrolling='yes'

La segunda posibilidad que se me ocurre es que aumentes la altura del IFRAME que ahora es de 275:
height="350" por ejemplo.

Kesua  

Hola JMiur!

Estoy peleandome con los avatares. La imagen de mi avatar sale encuadrada con un rectangulo i no llena todo el recuadro como la imagen del avatar del anónimo. También quiero mover un poco a la derecha el nombre del anonimo que queda un poco pegada a la imagen y no me acabo de salir.

Te envio el que tengo puesto a la plantilla para que le puedas dar una ojeada a ver si si pude hacer alguna cosa.

El blog que estoy haciendo pruebas por si quieres ver lo que pasa es este:

http://blogaprova.blogspot.com/

#comments-block.avatar-comment-indent
{ /* es la lista completa DL */
margin-left: 0px; /* esto puede complicar la salida de los datos */ position: relative;
}
#comments-block .avatar-image-container {
float:left;
height:37px;
left:0;
padding-right:35px;
position:static;
width:37px;
}
#comments-block .avatar-image-container img }
background:#b3b3b3 url(http://lh5.ggpht.com/_q7AIiDgzPUw/SuBo3ZL32mI/AAAAAAAAI7s/tpCZitnyxyE/s00/avatarapeupermontserrat2.jpg) no-repeat 50% 50%;
border: 1px solid #456;
display: block;
float: none;
min-height: 45px;
min-width: 45px;
padding: 2px;
}
#comments-block .avatar-image-container.avatar-stock {
background: #b3b3b3 url(http://lh5.ggpht.com/_q7AIiDgzPUw/SuCyunsKFkI/AAAAAAAAI8Q/CgHz8Q9cAQc/s00/avatarvisitasapeupermontserrat.jpg) no-repeat 50% 50%;
border: 1px solid #456;
display: block;
float: left;
min-height: 45px;
min-width: 45px;
padding: 2px;
}
#comments-block .avatar-image-container.avatar-stock img {
display: none;
}
img.delayLoad {
max-height: 45px;
max-width: 45px;
min-height: 45px;
min-width: 45px;
}
#comments-block dt {
line-height:5;
margin 0;
}
#comment-form {
clear:both;
margin:0 auto;
text-align:center;
width:auto;
}
#comment-editor {
margin-left:0px;
width:625px;
}


Gracias por tu ayuda

JMiur  

Lo que veo es un error en la transcripción y eso hace que algunas propiedades no se muestren:
#comments-block .avatar-image-container img }
...............
}

la llave inicial es una llave de cierre y debería ser de apertura:
#comments-block .avatar-image-container img {
...............
}

Habría que corregir eso para ver hasta donde afecta.

La posición del nombre lo controlas con el padding de esta definición:
#comments-block .avatar-image-container {
..........
padding-right:25px;
}

Colocas un valor menor y se desplazará a la izquierda.

Kesua  

Sí tenias razón, ahora salen bien los avatares.
Un último detalle,como se quita lo de... ha dicho y tambien como poner la fecha del comentario a la derecha.

Gracias por todo:)

Josep M.

JMiur  

Fíjate si encuentras estoen la plantilla:

<data:commentPostedByMsg/>

ese es el texto. Elimínalo o coloca un texto cualquiera.

Para la fecha a la derecha se me ocurre algo asi:
.comment-timestamp {display: block; text-align: right;}

Kesua  

Ya he aplicado los dos consejos que me has dado y ha ido perfecto. Ahora el único problema que tengo es que el comentario de Anónimo me queda pegado a la imagen y me gustaria tenerlo un poco separado tal como pasa en los comentarios que tienen autor. Sabes como podria arreglarlo?

Gracias por tu paciencia y consejos.

JMiur  

A ver, intentemos cone stas dos modificaciones:

#comments-block .avatar-image-container.avatar-stock {
background:#B3B3B3 url(http://lh5.ggpht.com/_q7AIiDgzPUw/SuCyunsKFkI/AAAAAAAAI8Q/CgHz8Q9cAQc/s00/avatarvisitasapeupermontserrat.jpg) no-repeat scroll 50% 50%;
border:1px solid #445566;
height:45px;
margin-right:19px;
min-height:45px;
min-width:45px;
padding:2px !important;
width:45px;
}

#comments-block .avatar-image-container {
float:left !important;
height:45px;
margin-right:25px;
padding:0;
position:static;
width:45px;
}

Kesua  

Ya está todo solucionado. :D

Gracias por tu paciencia y tus buenos consejos.

Josep M.

JMiur  

No es nada, me alegro que haya servido :)

psicologiadelaresistencia  

wena wena

Renzo  

como ago para que los fondos de los comentarios se intercalen ?
como aqui en el tuyo?

JMiur  

Tendrías que ver esta entrada, Renzo.

Viviana  

pero tengo mucho tiempo de haber cambiado mi avatar en mi perfil y en los comentarios sigue saliendo el anterior... hay solucion? gracias!!!

JMiur  

Viviana y Sofia: No es algo que podamos controlar, lo maneja Blogger a su arbitrio.

Viviana  

ya, ya, dime la verdad!!!!!!!

acabo de dejar esta consulta y YA aparece mi nuevo avatar... tu si que tienes contactos en las mas altas esferas de blogger :P

(bueno, en tu blog no se ve, pero en otro q pase, si)

JMiur  

Jajajaja Pura casualidad. Los avatares funcionan pésimo, despues de cierta cantidad, dejan de verse.

Viviana  

Si !!! Pero en los "Seguidores" de cualquier blog, aparece aun mi avatar viejo... jeejjej

Insisto, tu tienes contactos, jaajajaj

Manuel  

Hola Jmiur, en los comentarios de mi blog no se ven los avatares con IE pero sí con Firefox por lo que deduzco que el problema es otro. ¿Podrías ayudarme? Hace unos dias cambié el código para modificar la palabra "comentarios" ¿puede ser por eso?
Gracias.

Manuel  

Acabo de encontrar la solución: Opciones de Internet -> Seguridad -> Nivel personalizado -> Miscelanea -> Mostrar contenido mixto -> Habilitar (antes lo tenía deshabilitado). Eso impedía que mostrasen los avataeres.
Quizás a alguien más le pueda servir. Saludos.

JMiur  

Como tu perfil es inaccesible, no puedo responderte ya que no puedo ver el blog al que haces referencia.

JMiur  

Para colocar el orden del número y que aparezca a la izquierda del avatar vas a tener que mover códigos en la plantilla. El contador, debe ir inmediatamente después de DT y definir el CSS para que flote a la izquierda:

<dt class='comment-author' ............ >
<span class="comentacontador" style="float:left">
.....

Es difícil de responder con exactitud porque sólo puedo adivinar la forma en que está hecha la plantilla. Conviene, además que definas todas las clases e IDs necesarios; por ejemplo:

.comentacontador {float:left;}

Con la fecha es algo similar, debes mover el código:

<span class='comment-timestamp'>
..........................
</span>

y colocarlo justo antes de:

</dt>

Luego, deberás darle propiedades CSS como por ejemplo:

.comment-timestamp {display:block;}

JMiur  

Eso es así, cada plantilla es diferente y además, los gustos de cada uno de nosotros son distintos así que el resultado es correcto :)

Anónimo  

Ya! me quedó perfecto ;-)

Un saludo!

Bilosony2™  

Jmiur Hoy tengo un problema muy urgente. He visto que mi blog se defigura por copleto en las entradas cuando hay mas de un 1 comentario y lo peor que esto solo sucede en IE con la vista de compatibilidad y ademas e tenido que borrar ya muchisismos comentarios para poder evitar el problema y hasta ahora no encuentro solucion alguna. Tienes ide de porque sucedera esto????

Saludos!!

Bilosony2™  

Disculpa me olvide de dejarte un link para que veas un ej. de lo que te hablo:

http://www.pintagraff.com/2010/03/hello-my-name-is.html

JMiur  

Es probable que haya alguna etiqueta mal cerrada o un cierre mal ubicado en la aprte de la plantilla donde están los comentarios, deberías revisar eso. No es algo que pueda verificarse online.

Bilosony2™  

Ya lo e echo, estado un buen rato sentado viendo donde se podria encontrar el error y nada. Ya que no lo puedes verificar online podria si te envio la plantilla??

Saludos!!

JMiur  

Puedes pero, no se si voy a encontrar el error. Pruebo y te digo.

Bilosony2™  

Gracias Jmiur ya envie mi plantilla a tu mail. Ojala encuentres el problema... Saludos!!

Bilosony2™  

NO!!! sos un monstruo!!! para esto!!! :O
Al toke la sacaste :D y yo como dos dias intentando ver donde era el error :S Esto me motiva mas a terminar de leer
http://vagabundia.bolsanegra.net/index.php/tutorialhtml/ :D

Muchisimas gracias!!! :D

JMiur  

Parece que funcionó :D Me alegra que se resolviera el problema :D

Pavelkapaz  

Muchas gracias por los tutoriales sobre el avatar y el contador de los comentarios, al fin lo logre :D ... pero aun me queda una duda, que revisando los codigos nose como hacerlo... Sucede que me gustaria colocar el nombre de la persona que esta escribiendo, (ID, nick, Anonimo, etc) junto al avatar... como lo haces aquí... hasta el momento [url=http://sicarioinfernal.blogspot.com/2009/01/epoca-eotecnica-lewis-mumford.html]Esto es lo que he logrado[/url] ... Si me pudieces hechar una manito te lo agradeceria... lo que de todas maneras no quita las gracias por todos los tutorales :)

Saludos

JMiur  

Pavelkapaz:
No sé si lo que quieres es exactamente esto pero prueba agregando algo así:

span.autorcomentario { line-height:70px; }

De ese modo, el nombre quedará con el mismo esquema que acá pro, deberás agregar clear:both en esta parte:

#comments-block .comment-body {
clear:both;
}

Con line-height mueves el nombre, valores menores lo "suben" y mayores lo "bajan". Luego, llegado el caso, puedes cambiar la fuente de esos enlaces o cu color en la misma definición y en la del enlace:

span.autorcomentario { ............... }

Pavelkapaz  

Muchisimas gracias, justamente eso era lo que queria hacer :D

vale !!

.Sm4C.  

Hola JMiur, una consulta a mi no me sale lo de los colores en lo que es los comentarios par e impar solo me sale una raya con los colores pero no rellena todo el contenido o el bloque del comentario, le echas una ojeada http://sbpru.blogspot.com/2010/09/lorem-ipsum.html#comment-5594473698954908243 espero tu respuesta saludos :D

JMiur  

Eso es porque los divs que has colocado, no engloban a los comentarios. No puedo decirte exactamente cómo proque no es algo que se vea online pero, el que abre está bien y el que cierra, el </div&Gt es el que está equivocado. Para que tengas una idea, debería estar, en principio, justo antes del </b:loop>

.Sm4C.  

:) gracias ese era mi error ya lo solucione ! Saludos !

AP I / II  

AL FIN!!!!. lo logre....cuando empece a leer el post crei que me llevaria un mes pero en un rato lo logre. Lo unico que no consigo es que el nombre me quede mas junto al avatar....esta todo en 0, cuando corro el nombre a la izquierda se corre el avatar, cuando corro el avatar a la derecha se corre el nombre...como que hay una medida fija que no logro encontrar para modificarla, ya probe de todo y no hay caso.
te dejo un link para que veas.

http://appruebas2.blogspot.com/2010/10/rrr.html

si se te ocurre que puede ser, gracias por adelantado, sino seguire intentando. Si necesitas la plantilla aqui

https://sites.google.com/site/ap1y2blogspot/home/appruebas.xml?attredirects=0&d=1

JMiur  

OK. Probemos con este tipo de propeidades:

#comments-block .avatar-image-container {
float: left;
left: 0 !important;
margin: 3px 0 0 10px;
padding-right: 10px;
position: relative;
width: auto;
}

Los cambios son:
left: 0 !important; para quitar una propeidad que agrega Blogegr por defecto
en margin el valor 10px es la separación del borde izquierdo de todo ese rectángulo (puede ser cualquier otro número, claro)
padding-right: 10px; esa es la separación del avatar y el texto (lo mismo, el valor es el que quieras)
width: auto esto hará que la imagen del avatar tenga el tamaño real sino, está definida por blogger como de 37 pixeles de ancho y a veces, como por ejemplo en los comentaristas anónimos, esa imagen es más pequeña

Antonio Ruiz  

Hola JMiur!

Desde hace tiempo mi avatar en el blog no sale. El espacio está vacío. Por lo general cuando realizo un comentario en un blog donde está configurado los comentarios como "página completa", sí sale, pero en mi blog, configurado como "entrada incrustada" cuando hago el comentario sí sale, pero luego pasadas unas horas desaparece. Tengo activada la opción "mostrar imágenes de perfil en los comentarios".

¿Podrías decirme algo? No te lo pongo fácil.

Gracias.

JMiur  

El avatar está bien ya que acá está visible. Sin embargom en tu blog veo que trata de cargarse uno extraño:

http://1.bp.blogspot.com/_WHMcUdL8hJk/SocAEdFCyEI/AAAAAAAACQ4/UB0qCJi-GHw/S45/connection%2Br%25C3%25A9seaux%2BBagg%2527s.png

¿Por qué no vuelves a subir la imagen pero con un nombre limpio, sin caracteres extraños ni espacios ni acentos?

Antonio Ruiz  

Gracias por tu repuesta, JMiur. Nada más escribir mi comentario decidí subir un nuevo avatar y de momento no hay problemas. En cualquier caso, ¿hay manera de que este avatar salga en los anteriores comentarios que hice?

Gracias.

JMiur  

No, Antonio; al aprecer, el avatar que se muestra esá asociado a la fecha así que si vas cambiándolos, serán diferentes.

John Mistery Doe  

Hola JMiur, siempre e tenido un problema con los comentarios, al escribir un comentario largo el texto sale del borde invadiendo la sidebar, como podría conseguir que el texto quedara siempre dentro del recuadro del comment_body?

En mi blog de pruebas podrás ver el problema: http://blogdepruebasjmd.blogspot.com/2010/12/pruebal-links-guias-txt.html

Y ya que me e animado a comentar: como podría cambiar el color de los nombres de los comentarios que se hicieron con un perfil, por defecto me salen en negro y no se ven bien.

Gracias de nuevo JMiur!

JMiur  

John Mistery Doe:

Eso lo solucionas fácil, basta que agregues una propiedad:

#comments-block {
.......
word-wrap: break-word;
}

De esa manera, las líneas se cortarán y seguirán debajo.

Es conveniente que esa propiedad, en lugar de estar sólo en los comentarios, se establezca apra todo el blog. En tu caso, de este modo:

#main-wrapper {
.......
word-wrap:break-word;
}
.sidebar {
.......

word-wrap:break-word;
}

John Mistery Doe  

Muchísimas gracias JMiur, por fin lo consigo eres un genio.

Podrías decirme como cambiar el color de los nombres de los comentaristas con perfil?
He conseguido cambiar el color de los anónimos pero no se como cambiar el resto.

Siento la molestia muchas gracias.

JMiur  

Como son enlaces, colocar el color solo en #comments-block .comment-author {} no basta, debes agregar otra regla más:

#comments-block .comment-author a { color:#FFF; }

John Mistery Doe  

Un Millón de gracias JMiur, ya parece que mi blog va cogiendo forma.

Voy a tener que modificar los créditos del footer para colocar… Plantilla de Blogger Themes & JMiur.

JMiur  

No es para tanto, John :D

HaCk CrAcK  

Hola JMiur tengo un problema con los avatar que no se ven, me fije en el codigo fuente para ver que era lo que interpretaba el blog para que no se muestren y me aparece esto:

<div class="avatar-image-container vcard"><span dir="ltr"><a href="http://www.blogger.com/profile/14770070128075960217" rel="nofollow" onclick="" class="avatar-hovercard" id="av-3-14770070128075960217"><img src="http://img1.blogblog.com/img/blank.gif" alt="" class="delayLoad" style="display: none;" longdesc="http://3.bp.blogspot.com/_8oBZ2SZw9jc/SsSyK-GhH2I/AAAAAAAAB8M/qbNi7l6rtKw/S45/e45f30a8ef063fd5ea61893c9fbfc5ca.png" title="HaCk CrAcK" height="35" width="35">


Por lo que se ve solo me pone una foto en blanco y la foto que tendria que ir aparece entre longdesc.

JMiur  

El código fuente es inútil de mirar y el código de la plantiilla es casi imposible de editar. Debe ser algun problema de Blogger mismo.

nakahito  

Jmiur por mas que intento buscar una solucion no la encuentro,quiero cambiar de color al texto que esta abajo del formulario.

"comentar como:" , "salir" , y "suscripcion por correo electronico".

"Comentar como" esta de color negro y los dos enlaces de color azul, y como mi plantilla es oscura se ve feo. :(

http://oneclickdd.blogspot.com

JMiur  

Vas a tener que agregarle los datos en la secci´pon especial que usa Blogger y que tu plantilla n otiene. Fíjate en esta entrada.

nakahito  

Gracias... defini las variables, me ayudo con el cuadro de seguidores tenia las letras negras, sin embargo, no encuentro la adecuada para solucionar mi problema :(

Cêz  

Hola JMiur, logré cambiar el viejo código de mi plantilla Mínima, tengo exactamente el mismo problema que Ivoc, de los comentarios 3 y 4, así que cambié mi código < d l ..... < / d l > por el 'elemental', ahí salió bien aparentemente y seguí con el segundo paso, copié el último código debajo de < b o d y >, el resultado es extraño porque parte de él se situa encima de la cabecera y los avatares no aparecen en los comentarios. No hay un comentario de aquí que diga algo parecido al mio.
http://img560.imageshack.us/i/codigoloco.jpg/

Tengo que adaptar algo de ese código para mi plantilla? Qué será?


Muchas gracias!

JMiur  

La imagen no es clara pero, aparentemente, el estilo no está colocado dentro de una etiqueta style y por lo tanto, se ve como texto.

Cêz  

Hola JMiur, creí que la imagen sería clara pero ya veo que no conseguí mi objetivo pero al menos tuviste una idea de mi problema, sin embargo, aún sigo sin entender eso de style, estoy igual que SuperKyubi del comentario 50, copié tu código del comentario 51 debajo de < body > y no veo ningún cambio. Eso de no ver los avatares me esta volviendo loco! Qué puedo hacer para que se visualicen en mis comentarios?

Gracias!

JMiur  

No sé cuál es el ejemplo concreto; en que blog está colocado eso.
En http://asicious.blogspot.com/ el código de comentarios es el viejo código de Blogger.

Cêz  

Precisamente es éste http://asicious.blogspot.com/, mi blog de pruebas, le cambié el viejo código que era así "< d l ..... < / d l >" por tu código que llamas "elemental", quedó bien y hasta ahí me quedé porque probé el resto de los códigos de tu entrada y ninguno conseguía que aparecieran los avatares, será mejor enviarte mi plantilla porque no quiero molestarte mucho en esta entrada.

JMiur  

Tal como te dije, el código que tiene ese blog es el viejo código de comentarios y por l otanto, allí n ose verán avatares. Debes cambiarlo por el nuevo.

Es todo lo que está acá:

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

Puede copairse y pegarse lo indicado en el post; puede copiarse y pegarse el código de una plantilla mínima o tambiém, llegado el caso, puede eliminarse por completo, guardar la plantilla y Blogger volverá a insertarlo con el código nuevo.

Mientras eso no se modifique, imposible hacer algo más.

Cêz  

JMiur, eres increíble!!! cuandi leí tu consejo de volver a cambiar el "viejo" que yo creía 'elemental' por uno nuevo me sentí desesperanzado y el consejo de eliminar todo completo me asusto mucho porque era algo que nunca imaginé y diste en el clavo! me arriesgué borrando de <b:includable.... al otro parecido y rezando que Blogger inserte el nuevo código... aparecieron los benditos avatares!

Sabes? desde que entré a tu blog, me ha encantado la forma de tus comentarios, es muy elegante y prolijo, y leí en algunos comentarios que para lograr algo parecido es:
http://vagabundia.blogspot.com/2007/10/blogger-y-los-comentarios-1.html

cierto? muchas gracias por ayudarme!

JMiur  

Si algo tiene Blogger de malo es que no te deja borrar ciertas cosas y bueno, eso también es una ventaja para estos casos :D

En esa entrada que dices, empiexzan dos o tres detalles como numeración y colores pero, están basadas en el código viejo por lo tanto hay que ver el lugar exacto donde insertar esas cosas en el nuevo.

Cêz  

Ok, tomaré en cuenta tu consejo y veré si consigo intercalar el color de fondo de cada comentario (como los tuyos) y demás cosas.

Gracias :D

Puzzle  

Yo después de prueba y prueba, logre meter la imagen!

Y aunque he leído un buen de comentarios a ver si alguien tuvo el mismo problem! Parece que no, la cuestión es que la imagen me sale ENCIMA del nombre! Y relativamente pequeña!

No sé de que manera puedo poner la imagen como esta aquí..

A la izquierda del nombre! :(

JMiur  

Eso depende de la forma en que se quiera diseñar ese sector. La imagen puede verse a un lado si, por ejemplo, flota:

.avatar-image-container img { float: left; }

Puzzle  

Nada colega! :(
Agregándole esa propiedad, agregándole el estilo completo que expones, el de Gemablog, el de chicablogger! jajaja ninguno!

Tengo "horas" dándole y quitandole, experimentando y nada!!
Se sigue viendo la imagen y ABAJO el nombre..

T.T

JMiur  

No veo que este colocado eso, por el contrario, dice float:none; que es exactamente lo contrario:

#comments-block .avatar-image-container img {
background:#234 url(URL DE IMAGEN) no-repeat -229px -157px;
border:1px solid #456;
display:block;
float:none;
min-height:45px;
min-width:45px;
padding:2px;
}

Puzzle  

Lo que has visto, es uno de miles intentos fallidos! jajaja.. Actualmente lo he puesto como tu has dicho en el post.. Y a raíz de eso estoy cambiándole valores, la cuestión es que parece no pillar el estilo!!!

Es como si le estuviera cambiando el valor a algo que no existe.. Y efectivamente eso mismo pienso que esta pasando.. Porque no veo porque tenga que cambiar O.o

a mi parecer tienen distintos nombres o algo..

OSEA, el problema es peor de lo que pensaba =( jaja.. dios sabrá como se llama o que =S

JMiur  

El CSS contiene errores, no puede haberlos o no se ejecutará:

background-color: #VALOR;

es un error

Puzzle  

Le he dado un valor! Y nada.. Ni un mínimo cambio!!
Es como si el código se burla de mi.

Lo has mirado? no ves alguna otra cosa rara?
Crees que sea el estilo?

En #comments-block, yo veo que mis cosas se llaman algunas de diferente manera.. es decir que el código no es EXACTAMENTE el mismo que como lo exponen por ahí.. Puede ser a raíz de eso?

Lo mismo me paso con el Nombre de usuario y Fecha..
Y lo que hice fue meterle un entre cada uno.. Y lo puse uno bajo el otro.. Pero con la imagen, que va!! de ningún modo he podido..

Puzzle  

Pero vamos,
como si no le estuviera diciendo absolutamente nada.. Intente poner TAL CUAL tu código y el otra web, y nada!
Lo coloque dentro de body, dentro de head, fuera de ambos, y nada!
Le cambie valores, incluso exagerados los puse para pillar cambios, y nada!

Es como si le estuviera dando estilo a algo que no existe O.o

JMiur  

Errores varios; en esto, falta el espacio enter #comments-block y .avatar-xxxxxx

#comments-block.avatar-comment-indent
#comments-block.avatar-comment-indent dd

La regla que te dije es:
.avatar-image-container img { ....... }

No es:
#comments-block .avatar-image-container img { ....... }
el #comments-block está de más.

Puzzle  

PUFF.. Listo compadre! GRACIAS!!
Pensé que me tomaría miles de intentos mas.

Lo he logrado, bueno TU lo has logrado jaja..
He arreglado los fallos y efectivamente se dejó hacer cambios!
Le di un margin: VALORpx y todo perfecto!

Aunque me da la sensación de que aquí se ve la imagen un poco mas grande.. Tiene otra dimensión! no sé si es efecto visual pero bueh..

De momento me gusta así, aunque igual le meta un poco la mano por la curiosidad y "aprender" :D


Un saludo crack!
De nuevo sacándome la pata del barro!

Liliana  

Hola JMiur, estoy personalizando un poco la zona de los comentarios, el avatar me gustaría que quedara hacia la izquierda pero con algo de espacio, me imagino que con padding lo puedo hacer, sólo quiero moverlo un poquito pero no lo logro, obviamente que al moverlo el nombre del comentarista va a quedar pegado o encima del avatar. No sé como como mover todo, me encantaría que se viera con lo tienes tú...que el nombre del comentarista se centre con el alto del Avatar y donde empieza el comentario se mueva bien a la izquierda, es como creo que luce mejor, más ordenado. Crees que podrías por favor ayudarme con eso? Gracias de antemano, siempre eres muy amable...

JMiur  

El avatar lo puedes mover con margin o con padding, agregando una o ambas propiedades en esta regla; por ejemplo:

#comments-block .avatar-image-container {
...............
margin: 0 10px;
}

en este caso, al haber un margen a derecha e izquierda, también se separará el texto.

Para poder posicionar el texto de manera independiente, deberías tratar de encontrar la etiqueta que lo genera y agregarle alguna clase o algo que pueda identificarla.

Puzzle  

JMiur, por aquí otra vez..

Repasando temas viejos! jeje..
Me he fijado que mis comentarios se han cambiado.. le ha pasado algo..
Antes tenia el numero de un color diferente, mas grande, a la derecha!!
Y el cajón de los números "pares" no existe, el comentario se crea fuera, es decir en el cajón grande que debería encerrar los cajones de los pares e impares!!

La verdad no sé si me estaré volviendo loco, pero eso también creo que cambio!!
Podrías si eres tan amable y "puedes" mirarlo?
puede ser la entrada mas reciente de mi blog, (hay 2 comentarios). a ver si sabes a que se puede deber dicha anomalía O.o

lo RARO, es que jamás hice ninguna modificación importante, lo máximo que pudo haber afectado esto..
Fue; que los comentarios que estaban dentro de /* aquí */ los cambio por estos .. y pues he vuelto a cambiárselo al modo "antiguo" a ver si era.. pero que va!!

JMiur  

En alguna etiquetas STYLE del sitio, veo que los comentarios están escritos así:

<style type='text/css'>
<!-- numerar los comentarios -->

Eso es un error de sintaxis y por lo tanto, no se ejecutan, los comentarios del CSS se hacen de este ,odo:

<style type='text/css'>
/* numerar los comentarios */

Puzzle  

OLE, magnifico..
Todo ha vuelto a la normalidad.

No sé, por que me ha dado por "editar" eso!! Optimización paranoica puede ser el diagnostico!

PS. La plantilla, el diseño, el blog, ha progresado bastante desde aquellos inicios por enero2011.. Y el 80% te lo debo a vos!!
GRAZIE colega por estar siempre ahí..

Un saludo.

Lisandro  

Esta entrada es vieja pero usé lo que explica y me sirvió...
así que tengo que decir...
¡gracias!

Unknown  

Buenas!

Antes de nada agradecer tu altruismo. El caso es que yo tengo una plantilla que en el código que dices de Blogger sobre los avatares, lo tengo incompleto (es decir, sin las líneas marcadas en azul). El caso es que procedo a añadir esas líneas; y al darle a guardar la plantilla, me sale la ventana de error de blogger, y no me guarda los cambios. Así todo el rato y no consigo saltarme esa dichosa alerta.

El caso es que no salen los avatares de las personas que comentan en mi blog de pruebas; y quisiera darle una oportunidad al formulario de Blogger, antes de volver a pasarme a gestores externos de comentarios.

Espero a ver si me puedes ayudar. Muchas gracias!

JMiur  

Una forma sencilla de agregar el nuevo (ya n otan nuevo) sistema de avatares, es borrar el código:

Buscas y eliminas desde:
<b:includable id='comments' var='post'>
hasta:
</b:includable>

Guardas la plantilla y listo; Blogger agregará automáticamente el nuevo ya que esos b:includable no pueden ser eliminados.

Gamble1  

muy bueno

Anónimo  

Hola Jmiur, hice todo el procedimiento y si funciona, pero el avatar solo se muestra en el 1 comentario y en los demás ya no se visualiza nada. Mira, aquí un ejemplo Eme Android

Como lo puedo solucionar?

JMiur  

Agrégale esta regla de estilo y debería resolverse el problema:

#comments-block dt {position: relative;}

Anónimo  

Hola JMiur, eres todo un genio amigo, funciono de maravilla. :)

Laura  

Hola JMiur, mi blog es este http://musicaymuchomas-lara.blogspot.com.es/ y me gustaria saber el por que se me bloquea tanto y como evitarlo. Hace un tiempo lei algunos posts que iban de esto que incluian un codigo, lo puse, quite mas gadgets, pero nada, mi blog sigue pesando mucho. Me gustaria evitarlo ya que es muy molesto...
Muchas gracias de antemano!
PD: siento haber comentado en esta entrada, ya que no esta relacionada con mi pregunta

JMiur  

Yo n oveo que sea pesado. De todos modos, lo que se puede apreciar es que, por lejos, el gadget que más tarda en cargarse es el de la radio goomradio.com

Laura  

gracias por contestarme, pero, mucho de mis seguidores, me han comentado que al entrar en mi blog, se les bloquea, va muy lento. La verdad esque no quisiera quitar la radio, ya he probado por quitar un chat que tenia, y mas gadgets y no he notado ningun cambio. ¿Que podria hacer?

JMiur  

Tal como dije antes, no noto eso y el gadget que más consume es la radio. Sólo debes elegir.

Laura  

vale, entonces optaré por quitar la radio.
Me gustaria preguntarte otra duda, quisiera poner una nueva imagen de cabecera en mi blog, he visto en varios blogs que tienen una imagen diseñada por ellos por photoshop etc... de tipo png que contiene un menu.
Aqui dejo un ejemplo con la de este blog --> http://www.justinbieberspainfans.org/
Mi duda es: como yo utilizo una plantilla blogger y no una diseñada, ¿podria poner una imagen de cabecera de ese tipo? y en caso afirmativo quisiera saber como ponerle el link de enlace para el menu.
Muchas gracias de nuevo!

JMiur  

Con lo de la radio, simplemente prueba quitarla temporalmente y fíjate si eso mejora la performance. Cualquier cosa, la vuelves a colocar.

En tu blog hay una imagen en el header y puedes cambiarla por cualquier otra. Si se trata de agregar elementos como un mené, etc, como estás usando una de las nuevas plantillas de Blogger, conviene que lo hagas con el editor de plantillas de Blogger ya que la estructura de esas plantilla es compleja y son difíiiles de manipular manualmente.

Laura  

¿Y conoces algun programa para editar plantillas blogger como en el anterior blog (el del ejemplo de la imagen de cabecera)que me pueda descargar gratis?
¡Muchas gracias!

JMiur  

No, no conozco ninguno que permita hacer eso.

Laura  

gracias de todas formas JMiur!
Y tambien tengo curiosidad de como hacen que en una imagen de cabecera fija tengan en este caso una pantallita en la que rotan imagenes, como se hace eso?
Aqui dejo un blog de ejemplo: http://bestblends-mar.blogspot.com.es/
gracias de antemano
saludos!

JMiur  

Esa, en particular, no tiene ningún tipo de código extraño, simplemente, es un gif animado:
http://4.bp.blogspot.com/-eWzfIqNx1iY/Tsq_s_AwhQI/AAAAAAAAAfA/iJQdJJlfOAw/s1600/ofczzc.gif

Laura  

siento preguntarte tanto JMiur! sin resultar pesada, me gustaria saber cual es el codigo para el efecto que hace la imagen cuando se coloca el mouse encima, aqui un ejemplo http://nessacandyphotography.blogspot.com.es/2012/01/katy-perry.html
(me refiero a la primera del primer post, la de Katy Perry)
Gracias!

JMiur  

Usando transiciones y bordes redondeados:

.post-body img {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
background-color: #FFF;
border-radius: 50% 0 50% 0;
box-shadow: 0 0 15px #000;
padding: 15px;
}
.post-body img:hover {
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
transition: all 1s;
border-radius: 0;
cursor: pointer;
}

Laura  

Tambien me gustaria saber como modificar los colores de la pequeña nube de etiquetas que tengo en la sidebar de la izquierda de mi blog, hace poco he modificado los colores y necesito cambiarle los colores.
Aqui dejo el link de mi blog http://musicaymuchomas-lara.blogspot.com.es/
muchisimas gracias de antemano (siento las molestias JMiur!)

JMiur  

Si la nube de etiquetas es la de Cumulus, como es un archivo SWF deberás ver las opciones que tiene.

Laura  

Quise cambiar los colores del perfil twitter que tengo en mi blog (en la sidebar de la izquierda) y en vez del color lila me gustaria ponerlo anaranjado, en un blog pone que hay que seguir los siguientes pasos:
1.- Ir a la página de Twitter (no necesitas entrar a tu cuenta)
2.- Pulsa sobre "Extras"en la parte inferior central de la página
Pero "Extras" ya no esta en la pagina principal de twitter..
¿como puedo hacer?
gracias

JMiur  

Supongo que eso que tienes es uno de los widgets que provee el mismo Twitter. Todos ellos se encuentran acá

Laura  

Muchas gracias!
Todo lo que me has ido contestando me ha servido de mucho!!
Lo unico que no llegue a comprender es lo de la nube de etiquetas... necesito saber como cambiar los colores, pero necesitaria saber cual es la parte del codigo html para modificarlos desde alli...no se si la nube de etiquetas es la de Cumulus, tampoco se del archivo SWF...
gracias de antemano!

JMiur  

La nube de etiquetas es la de Cumulus y eso lo debes haber agregado, allí en el código es donde están los colores. Deberías buscar el sitio de donde lo has sacado para ver las instrucciones.

Laura  

El codigo de color se que es este #e5d3eb he puesto eso en el codigo HTML tambien he probado poniendo "cumulus" o "nube de etiquetas" he expandido las plantillas de artilugios y nada... tampoco encuentro exactamente el articulo del blog que encontre cuando la puse...
Supongo que como cuando le doy a editar en el gadget de la nube y no me sale un codigo, igual ya no lo puedo modificar. Lo he intentado de todas formas pero no encuentro una solucion.
gracias de nuevo por tu paciencia!

JMiur  

Es un gadget, por lo tanto, el código no está en la plantilla, debes editar el elemento HTML en la ventana de Diseño porque es allí donde lo debes haber colocado.

Laura  

Sí, tambien lo probe, pero me sale como si simplemente haya colocado una nube de etiquetas blogger, no me sale ningun codigo...
Bueno, ya intentare encontrar el articulo para modificarlo, muchas gracias por las aportaciones.
Otra pregunta me gustaria hacerle, es la siguiente:
en este blog http://defendiendoafamous.blogspot.com.es/2012/07/los-packs.html
aparece una imagen despues de cada entrada y en la sidebar sale siempre una tambien que se repite, ¿como podria colocar eso yo en mi blog? muchas gracias de nuevo y siento las molestias!

JMiur  

Esa imagen es parte del fondo de ese DIV, dependerá de la imagen que quieras poner.

Laura  

en que pagina puedo hacer esos fondos, o para modificar mis propias plantillas? como lo puedo hacer?

JMiur  

No sé a qué fondos te refieres.

Laura  

http://www.youtube.com/watch?v=RFS5N_yAGTo
por ejemplo en este blog aparece una plantilla muy compleja, distinta a los demas de blogspot, creo que es diseñada, pero me gustaria saber como y donde lo podria hacer yo misma.
muchas gracias

JMiur  

No entiendo a qué blog te refieres porque eso que muestras es un video de YouTube.

Quién te lo dijo...  

Jmiur, porque cuando realizo comentarios en distintos blogs aparece mi avatar pero detras la imagen de una silueta? (como si fuera una foto de frente).

JMiur  

Porque tu avatar es transparente y por lo tanto, se ve el fondo, sea el que sea. Blogger establece una imagen por defecto par los avatares y en muchos sitios, esa imagen se cambia por una personal.

No hay manera de controlar ese detalle y por eso, siempre es mejor usar avatares que tengan un color de fondo lo que evitará que ocurra eso y que se vean bien, sin importar el contexto o el color de fondo de los distintos sitios.

¿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