16 febrero 2011

Tus comentarios en color diferente

Para conseguir que los COMENTARIOS 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, 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.

Este sería 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:#F9F5F5 ;
border: 1px solid #981616;
margin: 0 0 10px;
padding: 6px 10px;
}

Si no modificas el código y guardas la plantilla aplicarás a tus comentarios un fondo crema y borde rojo.

Para cambiar su aspecto, tan solo debes modificar el background:#F9F5F5; y el border: 1px solid #981616; los colores puedes verlos aquí.

Guarda la plantilla una vez hayas terminado.

Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

6 comentarios

Lo probaré, aunque de momento estoy intentando poner la opción RESPONDER que publicaste el otro día pero algo me falla....

no me logra salir este truco sera que tengo que añadir los estilos encima de los estilos de los comentarios

ya solo me falta lograr inserta este estilo no se porque no me sale ñ.ñ...

Amigo sabes como hacer este tipo de categorias como la de este blog
http://www.todoanimeshd.com/

La categoría de Animes de este mes

Nitro habría que analizar la plantilla y ahora mismo no tengo tiempo ni para publicar siquiera.


Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"