Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Comentarios del autor del blog con color diferente

A menudo me preguntan cómo modificar el aspecto de los comentarios para conseguir que los del autor del blog tengan un color de fondo diferente, un borde, un color de texto distinto... Cualquier cosa que los haga destacar de los demás.

Conseguir esto es muy fácil ya que tan solo tendrás que añadir unas líneas en el código de la plantilla y algo de CSS para darle la apariencia deseada.

En la siguiente imagen puede comprobarse el resultado:




Diseño>Edición de HTML>expandimos artilugios



Busca en tu plantilla el siguiente código y añade lo que he resaltado en color rojo.

Este si la plantilla pertenece a las nuevas que ofrece blogger en su Diseñador:

<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + 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>

<b:if cond='data:comment.author == data:post.author'>
<div id='ComenblJTEAutor'>
<p><data:comment.body/></p>
</div>
<b:else/>

<dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
<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='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>

Este si la plantilla es antigua o no pertenece a lo descrito en el paso anterior:

<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'>
<div id='ComenblJTEAutor'>
<p><data:comment.body/></p>
</div>
<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>

Seguidamente, localiza la etiqueta ]]></b:skin> y justo antes añade estos bloques de CSS:

#ComenblJTEAutor {margin: 5px 0 0;}

#ComenblJTEAutor p {
background: #C2E4F1;
border: 1px solid #3399BB;
margin: 0 0 10px;
padding: 6px 10px;
}

Si no modificas el código y guardas la plantilla aplicarás a tus comentarios el diseño del que aparece en la imagen de ejemplo, al principio del tutorial.

Para cambiar su aspecto, atiende a lo siguiente.

La línea background: #C2E4F1; indica el color de fondo. Haz uso de la tabla de colores para obtener el código de tu color favorito (y reemplazar el anterior: #C2E4F1).

Puedes hacer uso de una imagen de fondo. Para ello, utiliza esta otra línea en lugar de background: #C2E4F1;

background: url("http://3.bp.blogspot.com/-kVKE1EowMgc/TVmM1-gAXjI/AAAAAAAABBA/ySD3sH1n31Q/jaimefondo.jpg") no-repeat scroll 0 -42px transparent;

El resultado:


Reemplaza la línea verde por la dirección de tu imagen si prefieres no utilizar la que ves en el ejemplo.

border: 1px solid #3399BB; Incluye un marco de 1 píxel de grosor, de estilo sólido (ver estilos de borde) y de color azul (la tabla de colores te permitirá, una vez más, personalizarlo).

En la línea margin: 0 0 10px;, el 10 representa el margen inferior. Aumenta o disminuye la cifra para cambiar la distancia.

padding: 6px 10px; Sirve para incluir un espacio entre el marco y el contenido. La cifra 6 representa el espacio entre el borde superior y el inferior mientras que el 10 marcará la distancia entre el texto y el borde izquierdo o derecho.

Guarda la plantilla una vez hayas terminado.

CINEXIM dice...

Jaime en relación con los comentarios, en mi caso no me aparece la imagen del perfil del comentarista. Tengo una plantilla antigua modificada.
¿me puedes echar una mano?

Gracias!!!

Perséfoneluz dice...

¡Muchísimas gracias, Jaime! Hace mucho que buscaba algo así, y me funciono. Le puse el fondo de una imagen, quedo muy bien.

Besotes. ;)

EL TERRY dice...

hola jaime oye ami no me sale nada de los dos codigos en mi plantilla , me gusto esta entrada para aplicarla ami blog me puedes ayudar? saludos

Jaime Trujillo Escobedo dice...

CINEXIM, por suerte hay un procedimiento sencillo que te permitirá obtener los avatares. Revisa esta entrada y escribe un comentario en caso de necesitar ayuda.

Jaime Trujillo Escobedo dice...

De veras me alegra saber has modificado los comentarios de tu blog, Perséfoneluz. Estoy seguro de que los lectores de tu blog lo agradecerán (especialmente al querer localizar una de tus respuestas).

Jaime Trujillo Escobedo dice...

EL TERRY, el código no tiene que ser idéntico. Prueba a buscar una línea a modo de referencia. Por ejemplo, lozaliza:

<data:commentPostedByMsg/>

Si no apareciese házmelo saber pues sería extraño.

Jaime Trujillo Escobedo dice...

EL TERRY, el código no tiene que ser idéntico. Prueba a buscar una línea a modo de referencia. Por ejemplo, lozaliza:

<data:commentPostedByMsg/>

Si no apareciese házmelo saber pues sería extraño.

EL TERRY dice...

Gracias por contestar precisamente esa linea mo me aparese trate con otras lines de tu codigo pero no me atrevi a instalarlo aver si me puedes ayudar

Jaime Trujillo Escobedo dice...

Bien, EL TERRY, pues ahora bastará con localizar el cierre </dt> después de dicha etiqueta.

Podrás entonces añadir el primer código resaltado en color rojo.

Seguidamente, busca <dd class='comment-footer'> para introducir el cierre (resaltado en rojo) justo antes.

Lady Madrid dice...

Mmm... Jaime, a mi no me sale ni esa frase ni el cierre dt. Lo más parecido que he encontrado ha sido:
#comments .comment-author:first-child {
padding-top: 0;

border-top: none;
}

.avatar-image-container {
margin: .2em 0 0;
}

#comments .avatar-image-container img {
border: 1px solid $(image.border.color);

http://righttomycloset.blogspot.com

Lady Madrid dice...

Valeeeeeeeee ya me he dado cuenta de que no expandí los artilugios :$

Jaime Trujillo Escobedo dice...

Aishh Lady Madrid! Por suerte diste con ello. Ahora simplemente hará falta personalizar los comentarios a tu gusto. En caso de necesitar ayuda avísame. Ya me contarás ;).

Lady Madrid dice...

Ya está hecho! Lo único que quería poner el borde double y no me ha salido pero creo que ha quedado bien. Gracias por tus consejos, Jaime!! ;)

Jaime Trujillo Escobedo dice...

Lady Madrid, al utilizar el borde double y conseguir que ambos marcos queden bien separados debes aumentar también el ancho a 3 píxeles:

border: 3px double #3399BB;

Laube dice...

Qué bueno!!!!!!!!!!!!! Genial!

Jaime Trujillo Escobedo dice...

Laube, estoy seguro de que en tu plantilla quedaría bien este truco aunque con la preciosa imagen que has puesto en tu perfil no creo que tus comentarios pasen desapercibidos entre resto.

Laube dice...

Gracias guapetón!

CINEXIM dice...

Eres un crack y no es la primera vez que te lo digo!!!

En todo caso necesitaría un poco más de ayuda. He seguido tus pasos, el avatar me aparece, pero me gustaría que quedase un poquito por encima del margen del comentario. Y otra cosa más, a ver si se puede hacer algo con la numeración de los comentarios pues, salvo el uno, el resto están comidos.

Gracias como siempre por tu atención!!!!

CINEXIM dice...

Jaime, lo conseguí!!!!!

Gracias como siempre por todo!!!!

Jaime Trujillo Escobedo dice...

Estoy orgulloso por saber que ahora los comentarios de tu blog tienen un diseño perfecto, Cinexim.

Me gusta el tamaño de los números pues permite, claramente, identificar cada comentario. Gracias por tus agradables palabras.

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo