Personalizar los comentarios en Blogger


Mendoza Salazar Veces visto
Mujer enviando mensajes en el celular e iconos de mensajes salen frente a ella

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
Resultados de la personalizacion de comentarios en blogger

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/

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.