Comentarios del autor con color diferente

|

Seguido preguntan cómo destacar los comentarios de modo que los del autor tengan un color de fondo diferente, un borde o algo que los haga resaltar de los demás.
Para conseguirlo sólo necesitamos agregar un código en la plantilla y valernos de CSS para darle los colores que queremos.

Primero entra en Diseño > Edición de HTML, marca la casilla Expandir plantillas de artilugios, busca este código y agrega lo que está en color rojo.
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<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/>
</dt>

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>


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

</b:if>

<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Ahora agrega antes de ]]></b:skin> lo siguiente:
.blog-author-comment {
margin: 5px 0 0;
}
.blog-author-comment p {
margin: 0 0 10px;
padding: 5px 10px;
border-left: 3px solid #000000;
background: #CCCCCC;
}


Puedes cambiar el color de fondo por el que quieras modificando esto:
background: #CCCCCC;

También puedes modificar el color del borde o cambiarle el color de la letra, eso ya dependerá de qué cambios quieras hacerle para que combine con tu plantilla.
Con estas modificaciones, los comentarios que hagas tú tendrán un aspecto diferente al resto de los demás.

OJO: Ten en cuenta que si has cambiado de nick, los comentarios que hayas hecho con el nick anterior no mostrarán este cambio, es decir, tendrán el mismo color que el de los demás comentaristas.

69 comentarios:

cyberbloggero dijo...

Excelente truco bro!!! cuando tenga un minuto lo agrego!

Definitivamente este truco no es para nuestro amigo pepex! XD jajajajajajajajajajajajaja!!!!


Un abrazo!!!!

Sergio dijo...

No se que pasa pero no funciona con mi blog he hecho todo lo que me dijiste pero en el comentario de prueba no aparece y no se a que se deba

El Potro dijo...

brother, jajajaja PepeX anda perdido, quién sabe dónde anda.

Sergio, ¿en cuál blog no funciona?

Alex dijo...

Muy bueno este Post Muy Bueno, la verdad muy bueno,
esto es lo que esperaba potro
bueno

El Potro dijo...

Sorry por haber tardado un poco en postearlo.
Saludos.

pp_grillo dijo...

Gracias amigo por la informacion... te dejo mi blog para que veas como quedo!

http://www.sedicerock.com.ar

Un abrazo!

PepeX dijo...

Jajjajajaja hola amigos, que tal?...
me fui a unas vacaciones de unos cuantos dias XD...
Jjajajajaja ps como dijo cyberbloggero: este truco no es para mi xD...
Jjajajajajaaj
Pero igual potro, muy bueno el truco, espero que otros usuarios de la ciudad puedan usarlo muy bien.
Saludos a todos!

El Potro dijo...

pp_grillo, excelente, te ha quedado muy bien en el blog.

PepeX, parece que cyberbloggero hubiera tallado su lámpara maravillosa. ¡Sólo así apareces! jajaja

PepeX dijo...

JEJEJEJEJEJ, ps parece que cyberbloggero descubrio el truco para hacerme aparecer, jajajaja.
Un saludo grande!!!

Sergio dijo...

en el blog en el que no me aparece es http://clanrusso.blogspot.com y no se por que gracias por la ayuda excelente post

El Potro dijo...

Haz un respaldo de tu plantilla y mándamela al correo para que la vea.
Saludos.

Jpz dijo...

Muy buen truco Potro.
Hace meses estaba esperando algo para diferenciar los comentarios. Grande Potro!
Cuando tenga un poco de tiempo lo aplicaré.

Saludos y gracias.
Jpz.-

Sergio dijo...

OK ya te la envio gracias por la ayuda EL POTRO y sigo con mis dudas como siempre ¿que son los vectores y como le puedo poner uno a mi blog?

El Potro dijo...

Ok, ahora la reviso.
Los vectores son formatos de imágenes para diseño, generalmente para Adobe Illustrator.

Saludos.

Descargar en Español dijo...

Muchisimas Gracias por todo,

Gracias a Ciudad Blogger he implementado muchas cosas utiles en mi blog (nieve, caja de busqueda, botones facebook y twitter flotantes y más) y el desempeño ha mejorado así como la cantidad de visitantes...

Por todo esto y mucho más.....ENLAZADO a mi Blog!!!!
http://descargarenespanol.blogspo...

Nuevamente mil Gracias

El Potro dijo...

Muchas gracias a ti por tu comentario y por el enlace ;)
Saludos!

Sergio dijo...

Hola gracias por la ayuda pero creo que ya encontre el problema es que tengo un gadget para el fondo de mi blog y creo que eso afecta pero de todos modos muchas gracias por la ayuda EL POTRO eres el mejor cuando se trata de blogger

Saludos

El Potro dijo...

Ummm no estoy seguro que ese sea el problema, yo quité el gadget del fondo para hacer los cambios y no resultó, aunque quizá algo se me haya pasado.

Saludos

Jpz dijo...

Ya está OK y totalmente operativo el truco.

Saludos.
Jpz.-

Sergio dijo...

Si tenias Razon El Potro no funciona ni sin el gadget del fondo de todos modos encontre una plantilla que me gusto mas y ya la instale tengo que dejar de cambiar de plantilla ummmm pues gracias por la ayuda es bueno saber que cuentas con alguien que te ayuda en el mundo del blog

El Potro dijo...

Por nada Sergio, mañana reviso la plantilla que me mandaste por correo para ver el problema.

Saludos!

Giancarlo dijo...

Hola Potro,

Bueno me voy a arriesgar hacer esta pregunta en publico, pero por alli dicen que no hay preguntas tontas, si no tontos que no preguntan...

Potro siendo el editor de un blog en blogger como hago para responder un comentario que hicieron en mi blog, lo pregunto por que no veo opciones, la unica que encuentro es hacer yo mismo un comentario como respuesta.

Aclaratoria muy dura: Hago la pregunta por que nunca me habian hecho un comentario en mi blog y por eso se me viene esta duda. (jajaja estoy Fino!!! por que alguien comento mi blog, jajaja)

Aprovecho ya que me quite la careta y fui capaz de preguntar esto, para hacer otra pregunta Potro: si una persona cualquiera llega a un blog y quiere comentar pero ni tiene cuenta en google ni en ninguna de las opciones que le da en la casilla de "Comentar como"... ¿Como hace esta persona?

Gracias Potro...

El Potro dijo...

Hola Giancarlo,

Completamente de acuerdo acerca de que no hay preguntas tontas.

No hay una opción específica para responder un comentario, cuando quieras responder un comentario sólo ve a la entrada donde está el comentario y escribe tú el comentario como lo harías en cualquier otro blog.
La gente que no tenga cuenta de Google podrá usar la opción Nombre/URL o Anónimo. Arriba del botón que dice Publicar un comentario verás las opciones disponibles. En mi caso yo he deshabilitado la opción de comentarios anónimos, pero en tu blog sí se puede hacer.

Saludos!

Giancarlo dijo...

Potro,

Ok muchas gracias. Lo de la gente que no tiene cuenta en google, lo preguntaba por que quizas la gente no se anima a comentar por que no sabe de que se tratan esas opciones, y claro cuando ve la opción de nombre y url pueden decir: yo no tengo url... bueno suposiciones mias o mejor dicho estoy tratando de pensar que mi blog no es tan malo como para que nadie comente... co....

Gracias.

El Potro dijo...

Es normal que un blog "nuevo" tenga pocos comentarios, ten en cuenta que aunque mucha (o poca) gente te lea sólo una muy pequeña parte es la que deja un comentario.
Lo que puedes hacer para que la gente que no tenga cuenta de Google sepa que también puede comentar es poner un mensaje arriba del formulario de conmentarios. Para hacerlo entra en Configuración > Comentarios y en Mensaje del formulario de comentarios escribe el mensaje que quieras. De esta forma aparecerá ese texto arriba del formulario de comentarios y ahí podrás especificar cómo puede comentar aquellos que no tienen cuenta en Blogger.

Saludos.

Giancarlo dijo...

Potro,

Ok ya voy a ver que mensaje pongo para que la gente sepa. Gracias por el dato, lo que pasa es que a veces la ansiedad y la desesperación puede más que uno y dan ganas de regalar el blog... Pero seré perseverante...

Gracias

✿Nyn✿ dijo...

Como pongo en la caja de comentarios una imagen o gif, please!!! En mi caja y como hago para ponerlos cuando hacemos un comentario en otro blog??? Espero haberme sabido explicar??? Gracias!!!

El Potro dijo...

Hola ✿Nyn✿,

No sé si te he entendido bien. Puedes poner una imagen arriba de la caja de los comentarios, puedes ver cómo en este enlace.

Saludos.

Vicky dijo...

Hola, Potro. ¡Muy bueno! Algo así andaba buscando. Pero antes de incorporar esto, quisiera que me aclararas, porfa, cómo funciona esto cuando se trata de un blog de equipo.
Si es un blog de varios autores, pero solo yo soy la administradora; entonces: ¿cuáles comentarios son los que aparecerán diferentes en un post? ¿solo los del autor de ese post, o también los del administrador del blog? (aunque éste último no sea el autor del post). Yo preferiría que solo se resaltaran los comentarios del autor mismo del post. ¿Es así como funciona?
Muchas gracias, de antemano, por tu respuesta.

El Potro dijo...

Hola Vicky,

Los comentarios que resalta son los del autor del blog, en este caso tú. Pero igual se pueden personalizar los comentarios de los demás autores, sólo hay que agregar algo en el código y los estilos del otro autor.
Por ejemplo, el primer código en color rojo quedaría así:

<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<b:if cond='data:comment.author == 'NICK_DEL_OTRO_AUTOR'>
<dd class='blog-author-comment2'>
<p><data:comment.body/></p>
</dd>
<b:else/>

Se agrega el nick del otro autor y se agregan los otros estilos de esta forma:

.blog-author-comment2 {
margin: 5px 0 0;
}
.blog-author-comment2 p {
margin: 0 0 10px;
padding: 5px 10px;
border-left: 3px solid #000000;
background: #CCCCCC;
}

Saludos.

Drusilada dijo...

Pues no me ha funcionado, me dice...
No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The element type "b:if" must be terminated by the matching end-tag "".
:(

El Potro dijo...

Ese mensaje significa que no estás colocando los códigos correctamente.
Inténtalo de nuevo y revisa con cuidado cada línea.

Saludos.

Vicky dijo...

Hola, Potro. Disculpa que no te agradecí tu pronta ayuda de hace algunas semanas. No te había vuelto a contestar porque a raíz de tu respuesta, me surgió otra interrogante, y quise dejarte un tiempo para que descansaras de mi preguntadera, porque ya me daba pena molestarte casi a diario. (aunque de todas formas seguí molestándote en otros posts...tú discúlpame, porfa).
Voy a tratar de poner estos códigos, para lograr este efecto de colores distintos. Pero antes, te digo que no he podido poner el código que me diste porque, a estas alturas, todavía desconozco (y esa era mi otra pregunta) qué es el nick, cómo lo busco, etc. Ni siquiera sé cuál es el mío (ups!), así que mucho menos sé cuál es el del otro autor (ja, ja). Tú perdona mi "bloggignorancia".
Gracias y saludos!

El Potro dijo...

El nick es el nombre que usa el autor en las firmas, en tu caso es Vicky, otro autor podría ser Adriana86 , etc. ;)
Saludos.

Vicky dijo...

Mira pues! Así de simple! Y yo que estaba suponiendo que era algún número o código de identificación de nuestra cuenta o del blog. Bueno, a eso vengo por acá: a aprender. En "bloggerlandia", pues "solo sé que nada sé" (ja, ja, ja!). Saludos! y muchas gracias por tu paciencia y porque nunca nos haces sentir tontos, aún por muy tonta que nos parezca nuestra pregunta.

El Potro dijo...

Ni de chiste he pensado que sean tontos, por el contrario, tienen muchísimo potencial y sobre todo ganas de saber cada vez más.

Saludos ;)

José Amorós dijo...

Gracias por la entrada, los cambios me han quedado estupendos en mi blog, además me ha salido a la primera, cosa rara en mí.

saludos desde 'Retales de Economía'

El Potro dijo...

Qué bueno que has obtenido los resultados esperados.
Saludos!

nEjO dijo...

hola de nuevo ... es posible poner una imagen de fondo solo en los comentarios del autor del blog?

pd: perdon pero explicame lo de como hago para que aparescan los avatares de los que escriben los comentarios? esque no encuentro donde me respondiste...

El Potro dijo...

En el segundo código donde dice:
background: #CCCCCC;
Cambialo por:
background: url(URL de la imagen);

Sólo cambia la URL de la imagen, con eso debe funcionar.
Saludos.

Hector dijo...

Hola amigo, me das permiso para poner este tutorial en mi blog (Tutoriales Hector) www.tutoshector.blogspot.com
?¿
Saludos

El Potro dijo...

Hola Hector,

Puedes tomar los códigos pero usando tus propias palabras para explicarlo.
¡Saludos!

Kum* dijo...

Hola Potro.

Tengo en el blog la opción de "Ventana emergente" para los comentarios y me gustaría que esa "ventanita" pudiera maximizarse pinchando en el cuadrito correspondiente (junto al aspa de cerrar, ya sabes) pero aparece deshabilitado.

Es posible habilitar esa función (maximizar/restaurar)?

Gracias, por tu tiempo... y tu saber enciclopédico.

El Potro dijo...

Hola Kum*,

Ese es un problema de Internet Explorer (raro ¿no?), en los demás navegadores se puede maximizar sin problema alguno.

Saludos.

Kum* dijo...

Joder, qué pena. Bueno, gracias en cualquier caso por la respuesta. Eres la bomba.

Un saludo.

MarcoliO dijo...

Espectacular bro

otro tutorial que sigo al pie de la letra..
y se agradece

Bendiciones

Sonia - L'Exquisit dijo...

Potro, acabo de aplicar todos los cambios, pero no hace nada...tu sabrias decirme por qué?

nl-bcn.blogspot.com

Gracias,

El Potro dijo...

Posiblemente no está en el lugar exacto que deben estar los códigos.

Sonia - L'Exquisit dijo...

Si, podrias ser, pq yo no tengo los codigos q tu dices, he encontrado algo parecido y los he metido alli enmedio...es posible q los tenga diferentes??

El Potro dijo...

Sí es una plantilla muy modificada sí es posible que no tengas los mismos códigos.
Haz un respaldo y prueba ponerlo en distintos lugares basándote en el fragmento que queda encerrado con los códigos rojos. Quizá con eso tengas más suerte.

Mayte dijo...

Argg!!

Hola Potro, pues nada, ya he intentado varios días antes de incorporar este código que me ha gustado mucho cuando lo he visto en otros blogs y nada. Ojala puedas ayuerdarme, sigo tus pasos, valida el código y todo, pero al momento de hacer el comentario, aparece como siempre :(

Gracias!

Mayte dijo...

Al final lo logre!! Gracias por tus aportes :D

Besiños ;)

Rodrigo dijo...

man una consulta que otro comando de colroes hay aparte del #CCCCCC...no me los e :S....en mi blog sale fondo blanco y no se ven el color del comentario :S...

El Potro dijo...

Mira esta entrada para conocer el resto de los códigos de los colores.

Onalem! dijo...

Hablando de Comentarios, Potro. Mirá esto:

http://androidapps.es/2010/05/28/impresiones-android-2-2/#comments

Viste que te dice ué explorador usó y qué tipo de Sistema Operativo. Eso se puede inculir en Blogger?

El Potro dijo...

Ese es un plugin de Wordpress, desconozco si se pueda hacer lo mismo para Blogger, en un rato libre que tenga veré si encuentro un modo de poder hacerlo, de tener éxito lo publico.

Onalem! dijo...

Dale, estaría bueno que puedas lograr algo así.

Potro, estuve dele intentar ubicar el error, pero no lo encuentro para nada el error que hay con el tema de mis comentarios.

Te hago un ejemplo de lo que pasa. Esta entrada http://www.onalem.com.ar/2010/07/amor-es-un-embarazo-parte-primera.html nadie la comentó. Por ejemplo vos la comentas, y luego cuando la quiero volver a abrir para que alguien más deje un comentario, sucede que desaparece la entrada, como esto: http://www.onalem.com.ar/2010/07/deciciones-de-un-cuerpo.html .

¿Entedés qué es lo que quiero decir?, por las dudas, aquí te dejo la plantilla, no la voy a tocar hasta que me respondas.

Muchas gracias.

Plantilla: http://www.mediafire.com/?b8l5vhyovo8cgs8

El Potro dijo...

Algún código de los comentarios debe estar fallando, no abrí tu plantilla pero sí pude ver en el blog que pusiste la opción de expandir los comentarios pero no te funciona, esto es porque ese efecto de expandir requiere de Scriptaculous y al mismo tiempo estás usando jQuery, estas librerías no son compatibles.
Si seguirás usando jQuery entonces quita el truco de mostrar/ocultar los comentarios, quizá por ahí está el problema.

VALERIAKARINA dijo...

Hola Potro, ¿qué debo cambiar o agregar para cambiar el color de letra? Veo sólo la opción de cambiar fondo

El Potro dijo...

Debajo del de color de fondo agrega:

color:#000000;

Ese será el color de la letra.

VALERIAKARINA dijo...

No encuentro los códigos necesarios ¿hay alguna otra manera de hacerlo?

El Potro dijo...

Deben estar, quizá no los tengas exactamente igual pero busca lo más parecido que encuentres para que te guíes.

Publicar un comentario en la entrada

Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.

 

Ciudad Blogger. Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com

Ir arriba Ir abajo