Personalizar los comentarios en Blogger

Los comentarios y opiniones de nuestros lectores tienen gran importancia. No está de más personalizar el área de los comentarios en las entradas individuales en Blogger, así está zona se vera de acuerdo al diseño de nuestro blog. Tutorial probado en las Plantillas Responsive: Contempo y Soho.

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 1
Estilos CSS para personalizar los comentarios

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

/* 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 -----*/

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..

"EL ÚNICO LÍMITE ES TÚ CREATIVIDAD"

Notas

[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

Petra (2021, agosto 26). Woman girl cell phone mobile texting relax female [Video]. Pixabay. https://pixabay.com/videos/woman-girl-cell-phone-mobile-85879/

Polski (2019, febrero 3). Kiss valentine's day love couple feelings mouth [Video]. Pixabay. https://pixabay.com/videos/kiss-valentine-s-day-love-couple-21068/