Enmarcar y separar comentarios en Blogger

El primer método es el más sencillo, y se trata de poner un borde debajo de los comentarios, esto es para separar cada comentario del blog de una forma simple pero efectiva.

Para agregar este separador sencillo sólo entra en Diseño | Edición de HTML y antes de
]]></b:skin> pega lo siguiente:

#comments-block .comment-footer {
border-bottom:1px solid #240B3B; /* Borde de los comentarios */
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

Si usas los comentarios anidados entonces agrega lo siguiente:

.comments .comment-block {
padding-bottom:10px;
border-bottom:1px solid #240B3B; /* Borde de los comentarios */
}
.comments .comments-content .datetime { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

Podemos hacer lo mismo pero que el separador de comentarios sea una imagen.


En ese caso el código que has de pegar es el siguiente:

#comments-block .comment-footer {
background-image:url(https://lh3.googleusercontent.com/_dsEG33PDaHw/TVHt_YdQyPI/AAAAAAAAA9E/eIHk3N7aisE/divider-andrea-baroni.gif);
background-repeat:no-repeat;
background-position:center bottom;
height:70px;
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

Y si usas los comentarios anidados deberás usar este código:

.comments .comment-block {
background-image:url(https://lh3.googleusercontent.com/_dsEG33PDaHw/TVHt_YdQyPI/AAAAAAAAA9E/eIHk3N7aisE/divider-andrea-baroni.gif);
background-repeat:no-repeat;
background-position:center bottom;
padding-bottom:20px;
height:70px;
}
.comments .comments-content .datetime { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
}

Pero igual podemos darle más estilos a cada comentario, por ejemplo enmarcar los comentarios añadiendo un color de fondo y un borde (No aplica para comentarios anidados).


Para conseguir este tipo de estilo marca la casilla Expandir plantillas de artilugios ahí mismo en Diseño | Edición de HTML y busca esta línea:

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

Debajo de ella agrega esto:

<div class='comentarios-cb'>

Luego busca un poco más abajo el siguiente </b:loop> que encuentres y justo arriba de él agrega esto:

</div>

Ahora antes de ]]></b:skin> pega lo siguiente:

.comentarios-cb {
background:#E6E6E6; /* Color de fondo */
border-top:1px solid #240B3B; /* Borde superior */
border-bottom:1px solid #240B3B; /* Borde inferior */
margin-bottom:20px;
}
.comment-body {
padding:10px;
color:#000; /* Color de los comentarios */
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
padding-right:10px;
padding-left:10px;
}
#comments-block .comment-footer {
margin-bottom:5px;
}
#comments-block .avatar-image-container {
float:left;
position:static;
margin-right:15px;
margin-left:5px;
margin-top:5px;
}

¿Y cómo se vería con bordes redondeados?


El procedimiento es el mismo que el anterior sólo que el código que habremos de pegar antes de ]]></b:skin> será este:

.comentarios-cb {
background:#E6E6E6; /* Color de fondo */
border:1px solid #240B3B; /* Borde */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
margin-bottom:20px;
}
.comment-body {
padding:10px;
color:#000; /* Color de los comentarios */
}
.comment-timestamp { /* Fecha de los comentarios */
font-style:italic;
font-size:9px;
padding-right:10px;
padding-left:10px;
}
#comments-block .comment-footer {
margin-bottom:5px;
}
#comments-block .avatar-image-container {
float:left;
position:static;
margin-right:15px;
margin-left:5px;
margin-top:5px;
}

(Los bordes redondeados en Internet Explorer no funcionan con CSS)


La /* Fecha de los comentarios */ puede cambiarse de formato en Configuración | Comentarios | Formato de hora de los comentarios.
Pero de igual modo podemos ocultarla, sólo basta con agregar debajo de .comment-timestamp { esto:

display:none;

Sólo ten en cuenta que si ocultas la fecha también se ocultará el icono para eliminar los comentarios.

En estos dos últimos estilos se especifica el área donde se cambia el color de los comentarios, ahí se pueden añadir otros estilos como el tamaño de la letra, tipo de fuente, etc.
En el caso de los dos primeros métodos sólo basta con agregar a ese código este otro fragmento para darle formato al texto de los comentarios:

.comment-body {
color:#000; /* Color de los comentarios */
}

Haciendo algunas de estas modificaciones los comentarios se verán más ordenados y serán más fáciles de identificar y leer por los lectores.