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.
Publicaciones Relacionadas
trucos blog
