Personalizar los comentarios del autor

Pasó mucho tiempo desde que Maurico C. preguntara si era posible modificar la fuente o el color de fondo de los comentarios dejados por el administrador del blog pero, de todas maneras, aquí va uno de los posibles métodos para hacerlo.

En una plantilla normal, los comentarios se muestran en tres rectángulos diferentes:

<b:loop values='data:post.comments' var='comment'>

  <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
    ....... es el nombre del comentarista y un ícono que lo representa .......
    ....... data:comment.authorUrl es la URL del comentarista  y data:comment.author su nombre
    ....... es el texto adicional que se muestra .......
  </dt>

  <dd class='comment-body'>
    ....... es el contenido del comentario .......
  </dd>

  <dd class='comment-footer'>
    ....... es la fecha en que fue enviado el comentario .......
    ....... también se incluye el ícono para eliminar los comentarios  .......
  </dd>

</b:loop>

Como son tres partes diferentes, podemos modificar sólo una de ellas (en este caso la segunda) o todas a la vez de tal forma que los comentarios del autor en su propio blog se verán "tan distintos" como uno quiera.

Para conseguir esto, lo que debemos hacer es condicionar el código y verificar "quien" comenta y eso lo podemos hacer con la variable data:comment.author (nuestro nombre) o con la variable data:comment.authorUrl que es única y por lo tanto, más precisa. Esta URL es personal, cada usuario tiene una diferente y corresponde a la del perfil así que puede copiarse directamente desde el escritorio de Blogger en el enlace Ver Pefil. Sería algo así:

http://www.blogger.com/profile/XXXXXXXXXXXXXXXXXXXX

El primer paso es poner la condición "rodeando" el contenido del loop; sea cual sea el que tengamos:

<b:loop values='data:post.comments' var='comment'>

<b:if cond='data:comment.authorUrl == &quot;http://www.blogger.com/profile/XXXXXXXXXXXXXXXXXXXX&quot;'>

  <b:if cond='data:comment.authorClass == &quot;blogger-comment-icon&quot;'>

    <!-- estos serán nuestros propios comentarios -->
    ....... y aquí pondremos el nuevo código .......

  </b:if>

<b:else/>
  
<!-- estos son los comentarios "normales" tal y como están ahora -->
  <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
    ....... 
  </dt>
  <dd class='comment-body'>
    ....... 
  </dd>
  <dd class='comment-footer'>
    ....... 
  </dd>

</b:if>

</b:loop>

Si ahora guardáramos, veríamos lo mismo que antes pero no nuestros comentarios. Faltaría agregar el código para eso que, será muy similar al otro excepto que podemos eliminar cosas ya que sabemos que son nuestros y no hace falta verificarlos. El código podría ser algo así:

<div class='misComentarios'>
  <dt class='comment-author-YOMISMO'>
    <a expr:name='data:comment.anchorName'/>
    <img class='icoYO' src='URL_miImagen' style='width:50px;height:50px;'/>El texto que queremos que aparezca
  </dt>
  <dd class='comment-body-YOMISMO'>
    <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-YOMISMO'>
    <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>
</div>

Para controlar el contenido con facilidad le agregamos clases CSS a cada sector. Así que ahora, podemos ir a la parte de estilo de la plantilla y antes de </b:skin> colocar esas definiciones.

Estas, son algunas de las que se ven en el ejemplo online:

dt.comment-author-YOMISMO { /* es el rectágulo superior con nuestro nombre */
  -moz-border-radius-topleft: 10px;
  -moz-border-radius-topright: 10px;
  background-color: aliceBlue;
  border: 2px solid CornflowerBlue;
  border-bottom: 1px dotted cornflowerBlue;
  color: CornflowerBlue;
  font-size: 22px;
  height: 50px;
  padding: 10px 10px 5px 10px;
}
dd.comment-body-YOMISMO { /* es el rectágulo central con el comentario en si mismo */
  background-color: aliceBlue;
  border-right: 2px solid CornflowerBlue;
  border-left: 2px solid CornflowerBlue;
  clear: both;
  color: #444;
  font-family: Comic Sans MS;
  font-size: 16px;
  margin: 0;
  padding:5px 10px 10px 10px;
}

dd.comment-footer-YOMISMO { /* es el rectágulo inferior con la fecha */
  -moz-border-radius-bottomleft: 10px;
  -moz-border-radius-bottomright: 10px;
  background-color: aliceBlue;
  border: 2px solid CornflowerBlue;
  border-top: none;
  margin: 0 0 30px;
  padding: 10px;
  text-align: right;
}
dd.comment-footer-YOMISMO a {
  color: cornflowerBlue;
  font-family: Tahoma;
  font-size: 11px;
}
img.icoYO { /* es el icono de laimagen */
  float: left;
  padding-right: 10px
}