Hace unos días el usuario Afm me pidió el estilo de los comentarios anidados que uso actualmente en el blog, y como la mentalidad mía es compartir lo que se y no guardarme nada he decidido publicar los estilos CSS que uso en los comentarios.
El resultado final sera este:
Como vez en el estilo que yo uso los comentarios del autor se identifican con un listón azul, y los avatares están encerrados en un marco azul celeste.
Para añadir estos estilos a tus comentarios solo debes agregar antes de ]]></b:skin> lo siguiente:
#comments{overflow:hidden}
#comments h4{display:inline;padding:10px;line-height:40px}
#comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
#comments h4,.comments .continue a{background:#58ACFA}
#comments h4,.comments .user a,.comments .continue a{font-size:16px}
#comments h4,.comments .continue a{font-weight:normal;color:#fff}
#comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #58ACFA;border-right:20px solid transparent;width:0;height:0;line-height:0}
#comments .avatar-image-container img{border:0}
.comment-thread{color:#111}
.comment-thread a{color:#777}
.comment-thread ol{margin:0 0 20px}
.comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#58ACFA}
.comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
.comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
.comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
.comments .comments-content .comment{margin:15px 0 0;padding:0;width:100%;line-height:1em}
.comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(http://4.bp.blogspot.com/-awl7HMjMgh4/T89YtINejTI/AAAAAAAAGmQ/XxcTVLKUAtI/s320/picresized_1338990142_comment-author-blue.gif);width:36px;height:36px}
.comments .comments-content .inline-thread{padding:0 0 0 20px}
.comments .comments-content .comment-replies{margin-top:0}
.comments .comment-content{padding:5px 0;line-height:1.4em}
.comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
.comments .comment-thread.inline-thread .comment{width:auto}
.comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
.comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
.comments .comment-thread.inline-thread .comment-block{margin-left:48px}
.comments .comment-thread.inline-thread .user a{font-size:13px}
.comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:40px;max-width:48px;height:38px;max-height:38px}
.comments .continue{border-top:0;width:100%}
.comments .continue a{padding:10px 0;text-align:center}
.comment .continue{display:none}
#comment-editor{width:103%!important}
.comment-form{width:100%;max-width:100%}
.avatar-image-container{
border:3px solid #58ACFA !important;
Ten en cuenta que estos estilos son para los comentarios anidados y no para el antiguo sistema de comentarios de Blogger.
Espero que les haya sido de utilidad, y sin mas que decir me despido no sin antes recordarle que sigan visitando Mil Trucos Blogger.
44 comentarios
Afm · enero 11, 2013 a las 10:16 pm
Muchas gracias por compartirlo enserio Juvinao como tu hay poca gente que comparta esto… Mil gracias y sigue asi!.
Un saludo 🙂
Hayder Juvinao · enero 13, 2013 a las 12:02 am
Gracias amigo, me sonrojas con tu comentario 😳
Afm · enero 11, 2013 a las 10:22 pm
Este comentario ha sido eliminado por el autor.
Jorge Luis · enero 11, 2013 a las 10:43 pm
Buen tutorial, lo colocaré en mi blog
Hayder Juvinao · enero 13, 2013 a las 12:05 am
Gracias Jorge Luis por tu comentario 😛
Afm · enero 12, 2013 a las 5:52 pm
ya lo he solucionando tocando el CSS asique… ya esta todo bien.
Un saludo 🙂
Afm · enero 12, 2013 a las 9:40 pm
Otra cosilla me gustaria saber o donde puedo conseguir codigo para tener como tu o Karla que teneis no se si se llaman asi «Hojas de estilO» es decir que tu cuando pones codigo lo pones en plan chulo y se que usas CSS pero yo no se hacerme un estilo como ese tu saber donde conseguir o nose…
Un saludo.
Hayder Juvinao · enero 13, 2013 a las 12:10 am
Amigo tu lo que quieres es aprender CSS?
Afm · enero 13, 2013 a las 9:53 am
aparte jeje. pero de todas formas lo que me refiero es que quiero usar algo como tu o Oloman que cuando poneis codigo lo poneis en un estilo y no hay suelto es a lo que me refiero.
te dejo una imagen para que veas a lo que me refiero:
[img]http://img687.imageshack.us/img687/2023/snap20130113at105138.png[/img]
Hayder Juvinao · enero 14, 2013 a las 1:02 am
Afm ahora si te entendi, mira esta entrada creo que es justo lo que necesitas.
http://www.miltrucosblogger.info/2011/12/anadele-estilo-los-textos-citados-de-tu.html
Afm · enero 14, 2013 a las 8:57 am
Si esto es lo que necesitaba jeje. Muchas gracias de nuevo la verdad que me estas ayudando mucho sigue asi crack!.
Un saludo.
Hayder Juvinao · enero 15, 2013 a las 8:18 pm
Gracias amigo 🙂
Toxico SM · enero 15, 2013 a las 7:25 am
brody, como le hago para cambiarme a ese tipo de comentarios? en mi plantila ya ay algo llamado reply, pero no es de este neuvo sistema
Hayder Juvinao · enero 15, 2013 a las 8:40 pm
Amigo Toxico esta es la entrada que necesitas.
http://www.miltrucosblogger.info/2012/01/comentarios-anidados-y-boton-responder.html
Amauri Patric · enero 25, 2013 a las 3:41 am
jejeje
juan manuel noseque · enero 27, 2013 a las 9:31 pm
Pues la verdad muchas gracias pro compartir amigo eh aprendido muchisimo de ti y esto no es una excepción a quedado de lujo en mi blog gracias
Hayder Juvinao · enero 28, 2013 a las 11:38 pm
juan me has hecho muy feliz con tu comentario :P, gracias por tu amable comentario.
Localiza Recursos Sociales en el Municipio de Oviedo · enero 27, 2013 a las 11:11 pm
Queda genial, muchísimas gracias. Podrías ayudarme a como añadir un avatar a los comentaristas anónimos aqui mismo.Muchas gracias de nuevo
Localiza Recursos Sociales en el Municipio de Oviedo · enero 28, 2013 a las 10:55 am
Hola: Discúlpame por la pregunta anterior,es que no había visto que tenías otra entrada explicando lo de los avatares para comentarios anónimos.Ya lo he visto e implementado en mi blog. Queda «genial»Gracias por brindárnoslo
Hayder Juvinao · enero 28, 2013 a las 11:39 pm
Ya te iba a responder que tenia ese truco en mi blog, saludos amigo 😛
Andy Martinez · febrero 2, 2013 a las 5:24 pm
una pregunta se puede poner asi el mismo estilo de comentario pero de color negro de fondo?? podeis ayudarme esqe mi blog es oskuro y los comentarios de color blanco como que no caen !! plis
Alberto Franco · febrero 3, 2013 a las 12:03 am
Andy Martinez para cambiar el color del fondo de los comentarios es muy facil aqui te explico:
1º Deberas ir a la edición HTML de tu plantilla.
2º darle a Control+F para iniciar una busqueda y encontrar el codigo para cambiarlo.
3º Escribir en el cuadro de busqueda esto «comments .comment-block,.comments .comment-thread.inline-thread .comment{ » SIN LAS COMILLAS
4º una vez identificada esa linea buscas esto: «background»
5º cambias el codigo de color que es este #000000
Y listo guardas cambios y tendras el fondo de los comentarios en negro como querais si no te sale o cualquier cosa comentala espeor averte ayudado.
Un saludo!
Andy Martinez · febrero 2, 2013 a las 6:05 pm
AMIGO NO TENDRAS AHI UNA ENTRADA PERO CON FONDE OSCURO’
ESQUE MUCHAS VECES EL BLOGG NO SOLO QUEDA CON FONDO BLANCO..
ME AYUDARIAS?
Hayder Juvinao · febrero 3, 2013 a las 10:56 pm
Andy Alberto ya te ha respondido
Andy Martinez · febrero 3, 2013 a las 11:18 pm
GRACIAS ALBERTO ME SIRVIO DE MUCHOO GRACIIAS BENDICIONES !
YAA HAYDER IGUALMENTE GRACIAS POR TOMAR EN CUENTA MI DUDA !
SALUDOS DESDE ECUA
Edwar Palacios · febrero 7, 2013 a las 10:31 pm
Este comentario ha sido eliminado por el autor.
Edwar Palacios · febrero 7, 2013 a las 9:24 pm
amigo una pregunta, ¿porque cuando coloco este estilo en mi blog se me pierden los de comentarios recientes?, probé con oro estilo de comentario y no paso ese problema….gracias
Edwar Palacios · febrero 8, 2013 a las 6:03 am
se me habia olvidado poner mi blog para que confirmes http://missolucionespc.blogspot.com/ gracias
Alberto Franco · febrero 8, 2013 a las 6:32 am
No entiendo lo de que se te pierden los comentarios recientes quieres decir el Gadget? de todas formas yo he probado este estilo y todo me ha ido bien.
Espeor averte ayudado, Un saludo.
María J. Montiel (Mey-Su) · febrero 26, 2013 a las 12:08 pm
Buenas, ¿no se podría cambiar el color del fondo de la etiqueta y sustituir «author» por otra cosa?
Hayder Juvinao · febrero 26, 2013 a las 7:57 pm
Maria para cambiar la imagen de author busca la siguiente URL:
http://4.bp.blogspot.com/-awl7HMjMgh4/T89YtINejTI/AAAAAAAAGmQ/XxcTVLKUAtI/s320/picresized_1338990142_comment-author-blue.gif
Y cambiala por la URL de la imagen que quieras.
Mario Jordan Nina · marzo 18, 2013 a las 1:21 pm
gracias 🙂 bro!!!
tambien tenia la misma duda…
yo ya modifique la imagen del autor…
Hayder Juvinao · marzo 19, 2013 a las 4:02 pm
Mario que bueno que ya la hayas modificado.
Saludos 😛
Kchaz Edgar · marzo 24, 2013 a las 11:19 pm
Aplicado a mi blog (^-^) , nuevamente gracias por tus aportes… Tengo ciertas dudas, pero primero leeré entradas que me interesen…
Saludos.
Dany R. · junio 7, 2013 a las 8:07 am
Gracias por compartirlo con nosotros 🙂
Hayder Juvinao · junio 7, 2013 a las 4:36 pm
Gracias por comentar
leviomat · agosto 16, 2013 a las 5:58 am
Excelente, Muy bueno.
Recién lo agregué en mi página 🙂
Un saludo.-
Hayder Juvinao · septiembre 11, 2013 a las 4:29 pm
leviomat se ven muy bien en tu blog 😉
nicolaspro15 · septiembre 8, 2013 a las 10:51 pm
De lujo
Hayder Juvinao · septiembre 11, 2013 a las 4:30 pm
Si, son estilos muy buenos.
Saludos
Gabriel Llantada · octubre 29, 2013 a las 2:21 am
roMpi la plantilla como recupero todo?
Juvinao · octubre 29, 2013 a las 5:16 pm
Elimina el código que agregaste y ya
Sabri_Elentiya · junio 4, 2014 a las 3:47 am
Gracias!
Hayder Juvinao · junio 8, 2014 a las 10:07 pm
Gracias por comentar.