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 🙂

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

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.

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.

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

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?

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 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

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?

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 🙂

leviomat · agosto 16, 2013 a las 5:58 am

Excelente, Muy bueno.
Recién lo agregué en mi página 🙂
Un saludo.-

nicolaspro15 · septiembre 8, 2013 a las 10:51 pm

De lujo

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!

Responder a Edwar Palacios Cancelar la respuesta

Marcador de posición del avatar

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