Nueva función en Blogger: ¡Comentarios anidados y botón responder!

Gracias a Jesús González (Autor de Iniciablog) me entero de esta muy útil función, la cual permite mostrar comentarios anidados mediante la inclusión de la función "Responder" y en Blogger Buzz ya han hecho el anuncio. Lamentablemente para algunos usuarios que usamos plantillas que no estén basadas en las del editor de Blogger, la función posiblemente no aparecerá.

En esta entrada veremos cómo habilitarlos mediate "fuerza bruta" y además cómo personalizarlos mediante CSS, ya que las clases y etiquetas se verán afectadas y por lo tanto el CSS con los atributos antiguos no funcionará.

Vista previa de la nueva función:

El tutorial:

Paso 1: Añadiendo la función en Blogger:

Recomiendo que hagas un backup de tu plantilla por si algo no sale bien, recordar que con esto reemplazamos una etiqueta importante que es la que permite que los comentarios se muestren en el blog.

En "Diseño | Edición HTML", deberás marcar "Expandir plantilla de artilugios". Deberás buscar la siguiente linea:

<b:include data='post' name='comments'/>

Esta línea se repite varias veces, las deberás reemplazar todas por la siguiente:

<b:include data='post' name='threaded_comments'/>

Guarda los cambios, previsualiza alguna entrada y listo, deberás ver el nuevo sistema de comentarios con la opción "Responder".

Paso 2: Añadiendo CSS:

Los comentarios ya como puedes apreciar han perdido la hoja de estilos. Esto se debe a que estos ya no están en una etiqueta </div>, sino en una etiqueta </blockquote>. Para poder aplicar correctamente los estilos, deberás conocer bien los ID's, tags y etiquetas.

Para nuestra suerte, automáticamente aparecerá el siguiente código dentro de la plantilla el cual contiene una hoja de estilos preelaborada:

<b:includable id='threaded_comment_css'>
  <style>
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 13px;
  margin-bottom: 16px;
}
.comments .comment .comment-actions a {
  padding-top: 5px;
  padding-right: 5px;
}
.comments .comment .comment-actions a:hover {
  text-decoration: underline;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: left;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 36px;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  margin-left:6px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
  margin:0 0 8px;
}
.comments .comments-content .comment-content {
  text-align:justify;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
  display: block;
  padding: 0.5em;
  font-weight: bold;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  width: 36px;
  max-height: 36px;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
}

/* Responsive styles. */
@media screen and (max-device-width: 480px) {
  .comments .comments-content .comment-replies {
    margin-left: 0;
  }
}
  </style>
</b:includable>

Puedes personalizarlo fácilmente ya que es las clases son bastante intuitivas.
Si no consigues entender cuales son las classes que se presentan en el código, recomiendo usar Firebug y analizar cada elemento para averiguar sus classes.

Si quieren probar la función pueden dejar un comentario bajo el comentario de pruebas que haré en la entrada.