Enmarcar y separar comentarios en Blogger

Los comentarios son una parte fundamental de un blog, pues en ellos se ve reflejada la opini?n de los lectores respecto a una entrada o nuestro sitio, por lo tanto es importante dedicarle un poco de nuestro tiempo para hacer de esta ?rea un espacio presentable, accesible y ordenado.

Y si de orden se trata entonces es necesario que cada comentario pueda identificarse donde empieza y d?nde termina, de lo contrario se convierte en un revuelto de letras del cual el lector puede salir huyendo. Veamos pues algunas formas de darle un poco de orden para delimitar el ?rea de cada comentario.

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqhSOaGizSaaZD4aKIIM3M0CnGfn30W8HqSEjIlOGVy1yY8Gl3muTwPLL7fGZHUNqujZgTeDsC6tp_EEtKb0A7VKv5IuGeRSjU1mVq_wwUNenEQM270k9RFL0EYu3mMI73rNsQW86_aQs/);
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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqhSOaGizSaaZD4aKIIM3M0CnGfn30W8HqSEjIlOGVy1yY8Gl3muTwPLL7fGZHUNqujZgTeDsC6tp_EEtKb0A7VKv5IuGeRSjU1mVq_wwUNenEQM270k9RFL0EYu3mMI73rNsQW86_aQs/);
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;
}

La URL que est? en color azul es la imagen que puedes cambiar por la que gustes, s?lo recuerda que en el height deber?s establecer la altura de la imagen m?s unos 20px m?s, por ejemplo, si el alto de la imagen es de 50px entonces el valor ser? de 70px
Esto es ?nicamente para que la imagen no se encime a la fecha de los comentarios.

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)

En cualquiera de los casos se puede cambiar el color de fondo, borde, etc. en las partes que tienen anotaciones en color verde.

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.