Personalizar los comentarios en Blogger

Este código CSS moderniza la sección de comentarios de un blog con una estética limpia y actual. Utiliza variables para una paleta de colores personalizable, implementando un tema claro por defecto y uno oscuro que se activa automáticamente según la configuración del sistema operativo. Visualmente, estiliza cada comentario como una tarjeta individual con bordes redondeados y sombras sutiles para dar profundidad. Mejora la legibilidad con tipografías de sistema, añade transiciones suaves para interactividad y actualiza el icono del autor a un SVG moderno.

Figura 1
Resultado ya personalizado de los comentarios y respuestas

Te diriges a TEMA, EDITAR HTML, buscas ]] ></b:skin> y antes de esto pegas el siguiente código:

Tabla 2
Estilos CSS para personalizar los comentarios

/*----- COMENTARIOS (DISEÑO 2025) -----*/

/* Definición de variables de color para fácil personalización 
  y futura implementación de tema oscuro.
*/
:root {
    --background-main: #f8f9fa; /* Un gris muy claro para el fondo general */
    --background-comment: #ffffff; /* Blanco para el contenedor del comentario */
    --primary-color: #007bff; /* Un azul vibrante como color de acento */
    --text-color: #212529; /* Negro suave para el texto principal */
    --text-secondary-color: #6c757d; /* Gris para texto secundario (fechas) */
    --border-color: #e9ecef; /* Un color de borde muy sutil */
    --shadow-color: rgba(0, 0, 0, 0.05); /* Sombra suave para dar profundidad */
}

/* Contenedor general de comentarios */
#comments {
    border-top: 1px solid var(--border-color);
    margin-top: 30px;
    padding-top: 30px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Título "Comentarios" */
#comments h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
    display: inline-block; /* Ajusta el borde al tamaño del texto */
}

/* Contenedor de cada comentario individual */
.comment-block {
    background-color: var(--background-comment);
    border: 1px solid var(--border-color);
    border-radius: 12px; /* Bordes más redondeados para un look suave */
    margin-bottom: 20px;
    box-shadow: 0 4px 12px var(--shadow-color);
    transition: box-shadow 0.3s ease;
}

.comment-block:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); /* Sombra más pronunciada al pasar el cursor */
}

/* Cabecera del comentario (nombre, fecha) */
.comment-header {
    display: flex;
    justify-content: space-between;
    align-items: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

#comments .comment .comment-header .user,
#comments .comment .comment-header .user a {
    font-weight: 600; /* Semi-bold para el nombre de usuario */
    font-size: 16px;
    color: var(--text-color);
    text-decoration: none;
}

#comments .comment .comment-header .user a:hover {
    color: var(--primary-color);
}

#comments .comment .comment-footer .comment-timestamp a,
#comments .comment .comment-header .datetime a {
    font-size: 13px;
    font-style: normal;
    color: var(--text-secondary-color);
    text-decoration: none;
}

/* Cuerpo del comentario */
.comment-content {
    padding: 16px;
    font-size: 16px;
    line-height: 1.6; /* Mayor interlineado para mejorar la legibilidad */
    color: var(--text-color);
}

.comment-content a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.comment-content a:hover {
    border-bottom-color: var(--primary-color);
}

/* Ícono en comentarios del autor */
.comments .comments-content .icon.blog-author {
    background-repeat: no-repeat;
    background-position: left;
    background-size: 18px;
    /* Nuevo icono SVG de verificación (más moderno) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23007bff'%3E%3Cpath d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.25 17.292l-4.5-4.364 1.857-1.858 2.643 2.506 5.643-5.784 1.857 1.857-7.5 7.643z'/%3E%3C/svg%3E");
}

.icon.blog-author {
    display: inline-block;
    height: 20px;
    width: 30%;
    margin: 0 0 -5px 5px; /* Ajuste vertical */
    vertical-align: middle;
}

   /*----- Cambia de color segun el sistema operativo -----*/

@media (prefers-color-scheme: dark) {
  :root {
    --background-main: #121212;
    --background-comment: #1e1e1e;
    --primary-color: #2a9d8f; /* Un verde azulado que contrasta bien en modo oscuro */
    --text-color: #fff;
    --text-secondary-color: #a0a0a0;
    --border-color: #333333;
    --shadow-color: rgba(0, 0, 0, 0.2);
  }

  .comments .comments-content .icon.blog-author {
     /* Actualizamos el color del SVG para el modo oscuro */
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232a9d8f'%3E%3Cpath d='M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-1.25 17.292l-4.5-4.364 1.857-1.858 2.643 2.506 5.643-5.784 1.857 1.857-7.5 7.643z'/%3E%3C/svg%3E");
  }
}

    /*----- Foto Perfil Usuarios -----*/
.comment-avatar {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    margin-right: 15px;
}

/*----- FIN COMENTARIOS -----*/

Nota. En este código puedes agregar y personalizar las fuentes, colores y tamaño ^{[1,2 y 3]}. Al igual puedes modificar el ancho, alto, la cabeceras de los comentarios y mostrar el comentario del autor con una marca que los distinga de los otros usuarios que comentan, este icono es intercambiable solo coloca la url de tu icono personalizado en la parte de color azul.

Ventajas SEO y Beneficios para el Visitante

Aunque el código CSS no influye directamente en el ranking de una página, su impacto en la experiencia del usuario es un factor crucial para el SEO moderno. Un diseño de comentarios limpio y estructurado, como el que este código proporciona, mejora la legibilidad y la usabilidad. Esto puede aumentar el tiempo que los usuarios pasan en la página y reducir la tasa de rebote, señales que los buscadores interpretan positivamente (Lahey, 2021).

Para los visitantes, la ventaja es doble. Primero, la clara diferenciación visual entre los comentarios de usuarios y las respuestas del autor (gracias al ícono de verificación) genera confianza y resalta la información oficial. Segundo, un área de comentarios estéticamente agradable y fácil de leer incentiva la participación. Esto fomenta la creación de contenido generado por el usuario, que añade valor y relevancia a la página, atrayendo potencialmente más tráfico a largo plazo a través de nuevas palabras clave.

Tabla 1
Caja de comentarios (Diseño 2021)

 /*----- COMENTARIOS DISEÑO 2021-----*/ 

/* Contenedor general */ 

#comments{ 
border-top:1px dashed rgba(0,0,0,.54); 
margin-top:20px; padding:20px 
} 

/* Título de los comentarios */ 

#comments h3 { 
margin-left: -20px; 
font-size: 20px; 
font-family: arial !important; 
font-weight: bold; 
text-transform: capitalize !important; 
} 

/* Cabecera de los comentarios individuales */ 

.comment-header { 
padding: 4px; 
background: #922b21; 
border: 1px solid #922b21; 
} 

#comments .comment .comment-header .user,#comments .comment .comment-header .user a { 
font-weight: bold; 
font-family: verdana; 
color:#fff; 
} 

#comments .comment .comment-footer .comment-timestamp a,#comments .comment .comment-header .datetime a { 
font-style: italic; 
font-family: verdana; 
color:#fff; 
} 

/* Contenedor de los comentarios individuales */ 

.comment-content { 
padding: 6px; 
} 

.comment-block { 
font-family: courier; 
border: 1px solid #922b21; 
border-radius: 0px 0px 5px 5px; 
} 

.comment-block a { 
color: red; 
} 

/* Ícono en comentarios del autor */ 

.comments .comments-content .icon.blog-author { 
background-repeat: no-repeat; 
background-position: center; 
background-size: 18px; 
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==); 
} 

.icon.blog-author{display:inline-block;height:18px;margin:0 0 -4px 6px;width:18px;} 

/*----- FIN COMENTARIOS -----*/

Lectura de interés

[1] Ayuda de Blogger (s/f). Cómo personalizar las etiquetas de CSS en los diseños. https://support.google.com/blogger/answer/46871?hl=es-419&ref_topic=6321969

[2] JMiur (2007, 03 de Octubre). Blogger y los comentarios (1). http://vagabundia.blogspot.com/2007/10/blogger-y-los-comentarios-1.html

[3] Oloman (2009, 03 de Agosto). Blogger. Modificar el formulario de comentarios. https://www.oloblogger.com/2009/08/blogger-modificar-el-formulario-de.html

Referencias

Lahey, C. (2021, octubre 11). ¿Qué es la tasa de rebote y cuándo es buena? Semrush Blog. https://es.semrush.com/blog/tasa-de-rebote/

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial 4.0 Internacional. Si necesitas utilizar alguna imagen, video o audio dirígete a la información proporcionada en las referencias. Esta publicación puede o no contener material con protección de datos o derechos de autor.