Escrito por
Los nuevos comentarios anidados de Blogger trajeron consigo la perdida total de los estilos en los comentarios que muchos bloggers teniamos en nuestros blogs, en este contexto hoy les quiero compartir estilos CSS para mejorar el aspecto de sus comentarios.
El resultado final del truco es el siguiente:
Para añadir este aspecto a tus comentarios solo debes agregar arriba de ]]></b:skin> lo siguiente:
/* Start Comment Style Code http://www.spiceupyourblog.com */
.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.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:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.comments .comments-content .loadmore a{display:block;padding:10px 16px;text-align:center}
.comments .thread-toggle{cursor:pointer;display:inline-block}
.comments .comments-content .loadmore{cursor:pointer;max-height:3em;margin-top:0}
.comments .comments-content .loadmore.loaded{max-height:0;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,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}
.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}
.avatar-image-container{background:url(https://lh5.googleusercontent.com/-Wmy6bwNKzbo/T0miLZkuJsI/AAAAAAAAChc/orbwMGHyBxA/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}
/* End Comment Style Code http://www.spiceupyourblog.com */
Espero que les haya sido de utilidad este pequeño truco y sigan visitando Mil Trucos Blogger.
Muy bueno estos estilos ya los agregue a mi blog 🙂
Carlos gracias por comentar.
Excelente. Muchas gracias por el aporte.
Gracias a ti por comentar Marco..
retroceder en la opción de respuesta no funciona porque en mi
que tal como estas, consultando no me queda bien en mi blog por que es … que estoy haciendo mal no me funciona
Amigo primero debes borrar los estilos que tenias antes.
Veo que usas una version modificada de la plantilla que publique de Taringa!,borra todo el CSS que añadi para el estilo de los comentarios y luego de eso si agregas este codigo.
nome funciona…
te dejo el link de mmi blog pa que cheques ya lo agregue el codigo pero nada
Administrador lee el comentario anterior.
Juvinao tengo problemas en mi plantilla y es que no me salen los comentarios anidados y salen otros y encima sin boton de responder entonces en la plantilla de taringa V5 si salen que lo publicastes tu quisiera saber como cojo el codigo y lo paso a la otra plantilla.
Necesito ayuda.
Un saludo
Me gusta mucho, pero si lo aplico mis comentarios pierden la numeración… ¿Habrá alguna solución?
Prueba con los trucos de numeracion que tengo en el blog y dime si todavia te sigue presentando problemas 😕
Hola oie no he podido agregar los estilos en mi blog,no se si sea por la plantilla que este usando alguna libreria Jquery o algo asi, habra solucion? NO me deja cambiar estilo, Destacar comentarios de autorn tampoco tengo en comentarios las opciones de suprimir y responder.
Porfavor ayudame a saber si es algo que hago mal o es la plantilla que no me deja, saludos y gracias.
http://www.checaesteblog.blogspot.com
Entre a tu blog y veo que no has añadido el codigo para que te aparezcan los comentarios anidados.
Para agregar los comentarios anidados sigue el siguiente tutorial:
http://www.miltrucosblogger.info/2012/01/comentarios-anidados-y-boton-responder.html
Y luego si agrega el codigo de los estilos.
Saludos Sedrach 😎
Juvinao me interesaria una numeracion para este estulo de comentarios si a ser posible porque el que pusistes no vale para este.
Un saludo.
acabo de ponerlo y se ve genial 😀 gracias ! 🙂
Pauli acabo de ver tu blog e hicistes un gran trabajo combinando este estilo de comentarios con el avatar redondo,gracias por comentar :love:
A que te refieres con : Para añadir este aspecto a tus comentarios solo debes agregar arriba de ]]> lo siguiente:
Debes agregar el codigo antes de la etiqueta ]]>b:skin
dONDE LO COLOCO?
Amigo que tanto sabes de HTML?
jaja, sin ofender
Excelente tu comentario Juvinao xd
veamos q tal
Pruebalo amigo 😛
quedo espectacular gracias 😀
Adrian es genial este estilo,es el que yo uso en este sitio..
Saludos :winky:
Hola amigo,
Ahora mismo no tengo puesto este estilo, pero al ponerlo no quedán igual a como lo tienes tu, se que es porque hace conflicto con los estilos que ya tengo puestos y tengo que borrarlos, pero esque no se.
Me podrias explicar que es lo que tengo que borrar para despues añadir estos estilos y que se incrementen a la perfeccion?
Gracias de antemano.
No sabes?
Despues de mucho, los agregé ^^
Disculpa Vhila por no haberte respondido pero tu comentario se me habia pasado por alto, es que recibo muchos comentarios al dia.
Saludos 🙂
Mi caja de comentarios esta como desactivada no puedo escribir nada… ayudame porfa!!!
te dejo mi blog: mi-aula-musical.blogspot.com
ayudame porque no puedo ingresar los comentarios..
Gracias
Amigo yo veo que hay comentarios en tu blog, fijate bien puede que esten desactivados los comentarios solo en una entrada.
excelente amigo me sirvió bastante
Gracias por tu comentario 😛
Sos un grande amigo, gracias por toda la ayuda! voy agregar el blog a mi “webs amigas”
Facundo gracias por tus palabras y por el enlace 😛
Saludos
Un aporte fabuloso, amigo, ya lo tengo puesto en mi blog, y funciona de lujo, solo una pregunta, ¿sabrías como darle color al fondo de los globos donde aparecen los comentarios? (Por ejemplo como la pág. http://www.intercambiosvirtuales.org)
Jesus no creo que darle color al fondo combine mucho, pero si gustas te ayudo via correo electronico
[ma]esta muy chido[/ma]
[ma]muy buenos tips para blogs[/ma]
Mi plantilla de mi blog es negra y edite todos los colores para ke se viera bien ya que en varias partes se veia blanco. Pero al lado del avatar a la derecha keda un espacio blanco eso es lo unico que me falta para que se vea bien en mi blog. Se puede modificar ahi ?
Mi plantilla de mi blog es negra y edite todos los colores para ke se viera bien ya que en varias partes se veia blanco. Pero al lado del avatar a la derecha keda un espacio blanco eso es lo unico que me falta para que se vea bien en mi blog. Se puede modificar ahi ?
Hola Loko Ser ayudo a Hayder Juvinao a algunos comentarios en los que puedo y me gustaria ayuudarte en este. EL caso es que he entrado en tu Blog y no veo ese espacio en blanco en ningun lao o estoy ciego o no esta. El caso que si sigue estando me gustaria que me pasaras una foto señalandomelo con algo que lo pudiese ver hazlo con paint y listo.
Espero averte ayudado.
Un saludo!
Hola Alberto Franco. que bueno que estes ayudando a Hayder. haci no se le hace tan pesado el trabajo xd. Y con respecto a que no se veia ningun espacio en blanco era por habia eliminado ese efecto jejej.
Pero ya lo agrege y lo edite los colores, solo me falta al lado de los avatares al lado de la derecha, aqui te dejo una captura [img]http://i1144.photobucket.com/albums/o488/loko_ser/espacioblancoenlosavataresenestilosparaloscomentariosanimados_zps629d9925.png[/img]
Ojala puedas ayudarme
Claro que puedo ayudarte y de hecho ya tengo la solicion!
Para quitar ese fondo blanco y la flecha ya que va junto tienes que irte al código HTML y buscar el siguiente enlace: “url(“https://lh5.googleusercontent.com/-Wmy6bwNKzbo/T0miLZkuJsI/AAAAAAAAChc/orbwMGHyBxA/s51/arrow.png”) no-repeat scroll right top transparent” Una vez buscado y encontrado lo eliminas guardas los cambios y ya no te saldra eso que te molesta.
Espero averte ayudado, y cualquier cosa ya sabes 🙂
Un saludo!
Hay si me salio. Solo habia que eliminar la url de la imagen.
[ma]Gracias te pasaste Alberto Franco[/ma]
Gracias por tu comentario, y si Alberto Franco es un gran usuario 🙂
Saludos
hola muy buen tutorial
mi consulta es la siguiente
como ago para que los botones en vez que sean de color amarillo sean de color rojo
y el texto sea blanco, o que los botones sean negros con su letra color roja..?
Muchas gracias, Hayder por el tutorial, me ha encantado sobre todo porque es muy configurable y eso es ideal para adaptarlo al diseño de nuestro blog.
Un saludito 🙂
Hola, Hayder. Muy buen post, me ha sido muy útil. Gracias. sin embargo tengo un problema al dejar una respuesta a los comentarios. Resulta que la letra de mis respuesta es blanca y el fondo de la casilla también. Podrías indicarme cómo camibar este aspecto. Gracias
Te dejo el enlace para que le eches una mirada si puedes. http://horizontefemenino.blogspot.com/2014/06/divagaciones.html#comment-form
Maria pero yo veo muy bien los comentarios de tu blog