Personalizar los comentarios en Blogger

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

Foto de Arina Krasnikova en Pexels

Me han estado preguntando respecto a cómo personalizar los comentarios y respuestas en los posts en Blogger, fue algo muy sencillo pues lo único que hice fue buscar la entrada con comentarios y ver su código de fuente HTML.

Aquí les dejó un ejemplo del resultado:

Imágen

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

Código CSS

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

Espero y te haya servido. Recuerda... 

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

Referencias:

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

[2] JMiur (2007, 03 de Octubre). Blogger y los comentarios (1) (Publicación en un blog). Revisado el 15 de julio de 2021 en http://vagabundia.blogspot.com/2007/10/blogger-y-los-comentarios-1.html

[3] Oloman (2009, 03 de Agosto). Blogger. Modificar el formulario de comentarios (Publicación en un blog). Revisado el 15 de julio de 2021 en https://www.oloblogger.com/2009/08/blogger-modificar-el-formulario-de.html

Comentarios

Publicar un comentario

No agredas a otros usuarios, no violentes ni faltes al respeto a otras personas que no conozcas.