Personalizar la caja de comentarios de blogger


En vista de que he tenido cientos de emails, preguntándome como cambiar de estilos a los comentarios de su blog de Blogger, les traigo un sorprendente código CSS, con el cual solo tendrán que insertarlo en su Editor HTML de Blogger y podrán obtener un magnifico estilo en la caja de comentarios de su blog de Blogger. Lo que hará el código CSS es mostrar un nuevo estilo de comentarios en su blog de Blogger, al responder como autor de su blog lo marcara de color rojo, y los usuarios que comenten en su blog lo dejara de forma normal en el color predeterminado de los estilos, además al pasar el cursor por cualquier comentario se desprenderá la imagen del usuario que hiso el comentario en su blog de Blogger. Los colores y los estilos son únicos en su categoría, es un estilo hermoso, que a todo blogger les encantara.

Personalizar la caja de comentarios de blogger

Anteriormente publique algunos trucos para blogger de los cuales les dejo los enlaces


A continuación mire su demostración en mi blog de demos, mire la caja de comentarios al final de la pagina de demos


Impresionante verdad

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Plantilla

Personalizar la caja de comentarios de blogger

3 Un clic en “Editar HTML

Personalizar la caja de comentarios de blogger

Ahora se le abrirá el Editor HTML de su plantilla

Personalizar la caja de comentarios de blogger

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

Personalizar la caja de comentarios de blogger
4 Busca este código

]]></b:skin>

Una vez que hayas encontrado el código, tendrás que insertar las siguientes líneas de código arriba del código que encontraste.

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
  padding: 5px;
}
.comments .comments-content {
  font-size: 13px;
  background:#fff url(http://3.bp.blogspot.com/-Y_KpLXSJxp0/UdRAtQib20I/AAAAAAAAD7I/enOyiNmzSP4/s45/ayudadeblogger.PNG);
  margin-bottom: 16px;
  margin-top: -8px;
  margin-left: -10px;
  padding-left: 1em;
  zoom: 1.05;
  background-size: 100px;
}
.comments .comment .comment-actions a {
background: #299DFF;
cursor: pointer;
color: white;
padding: 5px 10px;
margin-right: -10px;
margin-left: 10px;
float: right;
margin-top: -13px;
}
.comments .comment .comment-actions a:hover {
  text-decoration: none;
background: orange;
color: white;
}
.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: left;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 36px;
}
.comments .comments-content .comment {
  margin-bottom:16px;
  padding-bottom:8px;
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}
.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: none;
  margin: 0 0 -4px 6px;
}
.user.blog-author a {
    background: red;
    padding: 3px;
    padding-bottom: 3px;
    margin-left: -5px;
    text-decoration: none;
}
.user.blog-author a:hover {
    background: #29f;
    padding-left: 15px;
color: white!important;
}
.comments .comments-content .datetime {
  margin-left:10px;
}
.comments .comments-content .comment-header,
.comments .comments-content .comment-content {
  margin:px;

}
.comment-header {
  color: #fff;
  background: #299DFF;
  padding: 5px;
  margin-left: -10px !important;
  margin-top: -10px !important;
  margin-right: -10px !important;
}
.comment-header a {
  color: #fff;
  font-family:' Bree serif', arial;
  font-size: 14px;
}
.comments .comments-content .comment-content {
  text-align:justify;
  margin-bottom: 15px;
  font: 15px magra, arial;
  line-height: 18px;

}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}
.comments .continue {
  cursor: pointer;
}
.comments .continue a {
  display: block;
  padding: 0.5em;
  font-weight: bold;
}
.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
float: left;
width: auto;
max-height: 56px;
visibility: hidden;
opacity: 0;
left: 50px;
position: relative;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
}

.comment:hover .avatar-image-container {
visibility: visible;
opacity: 1;
left: 0;
}
.comments .avatar-image-container img {
  width: 36px;
  background: #299DFF;
  padding: 5px;
  border: 1px solid #299DFF;
}
.comments .comment-block {
    background: none repeat scroll 0 0 #FFFFFF;
    padding: 10px;
    position: relative;
    margin-left: 47px;
    box-shadow: 5px 13px 30px #999;
}
#comments a {
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
text-decoration: none;
}
#comments a:hover {
color: black;
}

Eso es todo ahora da un clic en “Guardar plantilla

Personalizar la caja de comentarios de blogger

Mira tu nueva caja de comentario en cualquier entrada de tu blog.

Facial verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos


Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si



Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.

Related post

Comentarios

46 comentarios:

  1. Al parecer no funciona cuando tienes conectados los comentarios de Blogger y Google+

    ResponderEliminar
    Respuestas
    1. Ese es el problema, pero estamos tratando de solucionarlo de algunas maneras, hasta el momento solo esta en proyecto, si lo logramos, lo publicare.
      Saludos.

      Eliminar
    2. Buena noches, luis, muchas gracias por los aportes que ha hecho en para los blog, me gustaria saber si se le puede agregar comentarios para usuarios de face, twitter, g+, linkedin, pinterest, instagram, y otras redes sociales. Espero haya sido claro, quiero que cuando hagan algun comentario que lo hagan desde cualquier conexion que tengan, y que ese comentario al que lo hace lo publique autamaticamente en su muro y el mio. Gracias

      Eliminar
    3. Hola es muy buena tu pregunta. lo tendre en mente...
      Saludos.

      Eliminar
  2. Es genial,me ha quedado precioso.Muchisimas gracias y un saludo

    ResponderEliminar
  3. Hola! He puesto el código y dice que no existe, ¿que debo hacer?

    Saludos.

    ResponderEliminar
    Respuestas
    1. Hola todas las plantillas para blogger tienen ese codigo, el cual sirve para poner los diferentes estilos de blogger.
      Saludos.

      Eliminar
  4. Hola amigo, eh intentado de muchas maneras personalizar mi caja de comentarios pero nunca me funcionan, y tampoco se puede activar la opcion de responder mensajes,, alguien me dijoque era por mi plantilla,, te agradesco enormemente que me ayudes.. este es m blog me puedes encontrar alli http://graphicsonlinedg.blogspot.com/
    me dejas un mensajje o algo, gracias de antemano..

    ResponderEliminar
  5. Muy bonito pero no me funciona,tengo enlazado los comentarios de blooger y Google+, sera que ya tienen como solucionar este problema??
    ?

    ResponderEliminar
  6. Hola, hemos podido personalizar, el problema ahora viene en la caja de respuestas, al nosotros responder una entrada la caja de respuestas es color blanco y la letra en color claro y por tanto no se ve bien. Como podemos cambiar el color de la caja de respuestas?

    ResponderEliminar
    Respuestas
    1. Me imagino que has cambiado el color o si no lo hiciste enviame la direccion URL de tu blog para verlo y asi poder ayudarte.
      Saludos.

      Eliminar
    2. Si, lo conseguimos. Mil gracias

      Eliminar
  7. Hola Luis, yo no tengo caja de comentarios en mi blog y la necesito por que nunca nadie de los que entra deja comentarios. Metí el código en la plantilla encima, debajo y en medio de
    ]]> pero no me sale.
    Yo no tengo muy claro si tengo activados los comentarios de blogger y google+, creo que si, pero en todo caso que debo hacer? desactivarlos o dejarlos?
    Muchas gracias solo llevo 2 meses en esto.
    (Si necesitas ver ni blog, es igual que el nombre de comentario.)

    ResponderEliminar
  8. Hola, me gustaría saber si en la caja de comentarios, podría poner una caja donde la gente pusiera su nombre, otra caja donde la gente pusiera su email y luego otra donde se pusiera el comentario. Es decir, que fuera como un formulario pero dentro de la caja de comentarios.

    Muchísimas gracias.

    Saludos.

    ResponderEliminar
  9. A mi no me funciona, sale el codigo que copio encima de laimagen de portada sin ningun resultado positivo, gracias igualmente. seré yo el que lo está haciendo mal.

    ResponderEliminar
  10. Hola! Gracias! ya lo tengo cambiado a mi gusto :). Pero tengo un problema. Ya no me aparece la frase Añadir comentario y tengo un texto que me gustaría que se viese encima de la caja dónde se escribe y aparece abajo del todo..
    A parte me gustaría cambiar solo el color del botón publicar ¿Sabes cómo?
    Muchisimas gracias!!

    ResponderEliminar
    Respuestas
    1. Hola sobre tu pregunta ¡Ya no me aparecela frase Añadir comentario!, los estilos CSS que instalaste en tu plantilla no ocaciona ningun problema al tema de os comentarios. Lo único que esta haciendo es cambiar los estilos de los comentarios nada más. Saludos

      Eliminar
  11. Estimado amigo, agregue el codigo tal como lo mencionas pero veo que , la caja sigue igual, no cambia al estilo nuevo, verifique que google+ no este entrelazado con blogger. pero aunasi no se realiza el cambio de la caja de comentarios, ojala puedas ayudarme, saludos

    ResponderEliminar
    Respuestas
    1. Si no te funciona los estilos de la forma que está publicado en este tutorial, desase lo que hiciste anteriormente, ahora prueba insertando todo el código nuevamente después del siguiente código < b:skin > … Me indicas como te fue, saludos.

      Eliminar
  12. Muchas, pero que muchas gracias por este truco. Combinando parte del código que nos dejas en este post, con el que yo ya tenía implementado he logrado el efecto que estaba buscando. De verdad que te lo agradezco. Un abrazo.

    ResponderEliminar
  13. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
    Respuestas
    1. Hola Marga, por favor indiqueme cual es la dirección URL de su blog de Blogger, específicamente donde tenga cualquier entrada con comentarios.

      Saludos.

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Hola Marga, he visto su blog de Blogger, con respecto a su pregunta el texto de los comentarios salen algunos separados y otros normal, por que los usuarios que comentan ponen doble espacio al escribir y doble espacio hacia abajo, así que no es problema de sus sistema de comentarios. Ademas las palabras salen de acuerdo al texto que tiene por defecto en su blog de Blogger específicamente los estilos de su blog.

      Saludos.

      Eliminar
    4. Este comentario ha sido eliminado por el autor.

      Eliminar
    5. Este comentario ha sido eliminado por el autor.

      Eliminar
    6. Sí que había solución, y era añadir esto a CSS:

      .comments .comments-content .comment-content {
      text-align:left;
      }

      De esa forma desaparece el texto justificado.

      Eliminar
    7. Hola Marga, es bueno saber que a dado solución a su inconveniente.

      Saludos

      Eliminar
    8. Hola Luís! (Aunque veas que publico como José Luís, soy en realidad su hija). Estoy tratando de hacerle un blog bonito, dentro de mis limitadísimas posibilidades pues yo de programación cero patatero. De hecho llevo todo el fin de semana intentando cosas y me estoy deprimiendo mucho ya. Y encima, cada vez que busco algúnn tutorial en Google acabo viendo los tuyos jajaja! Quiero decir, que eres un crack y no sé si eso me deprime aún más. En fin, no sé si podrías ayudarme un poquito con algunas cosas. El blog de mi padre es http://comoburbujas.blogspot.com.es/ y como observarás, está hecho un desastre. He intentado crear el slideshow de entradas populares y a cada intento, peor funciona. Y a mí me pasa igual que a algún otro usuario que ha comentado por aquí...que no encuentro ese código en el buscador (]]>) Me da como resultado "0 de 0". Básicamente quiero incluir en la barra lateral algunas "pijaditas" que queden chulas en el blog, sin recargarlo demasiado tampoco, ya sabes, algo atractivo, funcional y elegante. He intentado mil cosas este fin de semana...probando plantillas muy guapas, para al final, acabar de nuevo en el editor de plantillas de Blogger, que aunque no está mal, ya sabes que es bastante limitado (otra cosa es saber modificar sus códigos pero claro, ahí yo ni me atrevo a entrar!) Por qué no habré nacido yo con una mente más matemática...argh, no me saques de lengua, arte y deporte :) A ver si puedes echarme un cablecillo hombre...Si alguna vez vienes por España, estás invitado a nuestra casa. No se me ocurre mejor manera de compensar tu ayuda! Un saludo desde la Costa Dorada de Tarragona. (Rosana)

      Eliminar
    9. Hola, por favor puede dejarme un comentario en la siguiente direccion: ayudadeblogger@gmail.com

      En el cual le indicare que es lo que puede realizar y guiarle paso a paso sobre todo lo que usted necesite.

      Y muchas gracias por la invitación

      Espero su mensaje en mi cuenta de correo electrónico

      Saludos

      Eliminar
  14. Respuestas
    1. Hola Angel, así es, es todo el código que debe de ingresar tal como lo muestro en el tutorial.

      Saludos.

      Eliminar
  15. Hola Luis, ya no se que hacer para poner una caja de comentarios en mi blog, una caja normalilla, no pido más, lo he probado todo activar comentarios nada, añadir el código al css nada, poner tu ćodigo en la plantilla nada, por favor podrás ayudarme. Gracias, mi blog se llama lasherramientas de benita.
    Te estaría agradecida eternamente.

    ResponderEliminar
    Respuestas
    1. Hola, espero no estar respondiendo muy tarde... Para incrustar la caja de comentarios sin salir del post debes ir a: Configuración >> Entradas, comentarios y uso compartido >> Ubicación de los comentarios "Incrustados".

      Espero que sea lo que buscas, un saludo, cualquier inquietud no dudes en responder. http://pedazovirtual.blogspot.com

      Eliminar
  16. Muy bueno, si me sirvió muchísimas gracias. :D

    ResponderEliminar
  17. aun funciona?, tengo en theme en mi blog, pero cuando añado ese codigo se rompe el theme :/

    ResponderEliminar
    Respuestas
    1. Hola Grifus, con respecto a lo que indica, tal vez sea alguna configuracion de su plantilla

      Saludos.

      Eliminar
  18. hola luis, mira llegue aca buscando el codigo de la caja de comentarios original, me baje una plantilla que trae disqus pero con publicidad, prefiero los comentarios de blogger. tendras ese codigo? un saludo

    ResponderEliminar
  19. Como puedo cambiar el logo naranja de blogger? en esta caja de comentario veo muchos?

    ResponderEliminar
  20. hola como hago si solo quiero aplicar en una pagina nada mas no en todo el blogger ? y ademas agregar para que se pueda hacer envio de archivos (imagenes)

    ResponderEliminar
  21. Si me sirvio, pero me gustaria si pudiras traer mejores diseños.

    ResponderEliminar