Personalizar los comentarios en Blogger

¡Hola, hola, mis amores! ¿Cómo están? Con la mudanza del blog, jamás publiqué este tutorial para los comentarios. Con la desaparición de G+, muchos tuvieron que volver a los comentarios propios de Blogger/Blogspot, así que yo hice este pequeño tutorial para que pudieran personalizar y dejarlos bien bonitos.

Por supuesto, si quieren aprender más al detalle cómo personalizarlos, pueden adquirir el curso de HTML y CSS para Blogger, pues, todos los códigos y todo lo explicado, está hecho específicamente para ésta plataforma. Si les interesa, pueden pasar por aquí:

Curso de Blogger


La caja de comentarios, debería quedarles más o menos de esta manera (todo el código está en esa gama de azules, así que tendrían que cambiarlo si quieren otro color).



Para poder visualizar este código, deberán ir al panel de admninistración, van a Tema, eligen Personalizar y por último, van a ir a Opciones avanzadas, CSS y ahí es donde pegaran todo este código.

Todo el código está comentado y segmentado así puedan ir viendo parte por parte en él:



¿Qué les recomiendo cambiar de aquí? El background: #617073;, que es el color de fondo, la letra, font-family: merienda;, pueden elegir la que más les guste y por último, el border: 1px solid #a7fbd1; que debería combinar con el color de fondo ya que es el color del borde 😉



Aquí, sólo el color de fondo. Recomiendo que sea claro, así no hay que cambiar el color de la font, que es negro. Si es un color oscuro, recomiendo poner color:#ffffff;


En este, a menos que quieran ponerle un fondo de color, no recomiendo tocarlo, ya que es un fondo blanco y las letras son negras.


En este último, vamos a darle esa formita cuadrada y tan bonita al avatar, además, le agregamos un borde de color. Para cambiar de color del borde, deben editar border: 2px solid #2D82F6; y si lo quieren sin borde, basta con borrar esa línea y ya.

Como pueden ver, el código no requiere mucha edición, aunque si se animan y quieren hacerle más modificaciones, son más que bienvenidos a hacerlo.

Si hay algo que no entiendan del mismo, pueden dejar sus dudas en los comentarios 🙂

Pueden descargar el código completo justo aquí.

¡Un abrazo!

¿Te gustó la entrada?

Haz clic en los corazones ¡y vota!

Votos / 5. Votos:

8 Comments

  1. Campirela_ 23 julio, 2019 at 5:19 am

    Eres un artista no dudo que deben de quedar preciosos pero mira , me quedo así tal cual no sea que vaya a escacharrar todo , que toco algo y me salen duendes ajjajaj ..pero de todos modos mil gracias por aportar tanto Roxana eres una amor de niña ..Un fuerte abrazo y te deseo un muy feliz martes y resto de la semana muakk.

    Reply
    1. Roxanabr 23 julio, 2019 at 8:52 pm

      Muchas gracias, Campi. Te dejé el código adaptado a tu perfil 🙂
      ¡Un abrazo!

      Reply
  2. Citu 23 julio, 2019 at 9:50 pm

    Uy yo no sirvo para eso termino con jaqueca y enfadada contra el mundo. Pero gracias por la entrada tal vez me anime y siga tus onsejos.

    Reply
    1. Roxanabr 28 julio, 2019 at 4:05 pm

      Si te animas y tienes alguna duda, me avisas y te ayudo 🙂
      ¡Un abrazo!

      Reply
  3. Yessy 28 julio, 2019 at 2:49 pm

    La verdad esta clase de entradas me super encantan. Todo es cuestión de arriesgarse, puesto que para HTML y CSS no tengo experiencia. Me tendre que comprar tu curso y estudiarlo detenidamente.
    Gracias por compartir tus conocimientos.
    Un abrazo!

    Reply
    1. Roxanabr 28 julio, 2019 at 4:24 pm

      Mira que no es tan complicado como parece, así que si te animas, seguro vas a llegar a dominarlo en poco y si tienes dudas, puedes preguntarme.
      ¡Un abrazo!

      Reply
  4. Giancarlo Sesarego 29 julio, 2019 at 11:15 pm

    Recuerdo que intente hacerlo hace tiempo y fracase xD Considerare contratar tus servicios para que me pongas bonito mi blog.
    ¡Un abrazo!

    Reply
    1. Roxanabr 17 agosto, 2019 at 1:13 am

      Cuando quieras, aquí me tienes 🙂
      ¡Un abrazo!

      Reply

Leave A Comment

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *