Personalizar los comentarios en Blogger


Mendoza Salazar, A.A. Veces visto

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 final para personalizar los comentarios

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

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

Comentarios

  1. Olá Aarón, buenas noches desde Brasil!

    ResponderEliminar
  2. Olá Mendonza, queria personalizar meu blog , mas tenho medo de não dá certo. :)
    Uma boa noite!
    Deus te abençoe.

    ResponderEliminar
    Respuestas
    1. Hola Fatyma, que mal que no te haya servido implementar estos códigos. Vi la plantilla en tu blog y estás utilizando una de las plantillas clasicas pues estas manejan un código distinto a las plantillas responsive. Saludos y bendiciones.

      Eliminar

Publicar un comentario

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