Mil Trucos Blogger

Estilo de comentarios anidados de Mil Trucos Blogger

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

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.

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

44 Comentarios

  1. Afm Afm
    enero 11, 2013    

    Muchas gracias por compartirlo enserio Juvinao como tu hay poca gente que comparta esto… Mil gracias y sigue asi!.

    Un saludo 🙂

  2. Afm Afm
    enero 11, 2013    

    Este comentario ha sido eliminado por el autor.

  3. enero 11, 2013    

    Buen tutorial, lo colocaré en mi blog

  4. Afm Afm
    enero 12, 2013    

    ya lo he solucionando tocando el CSS asique… ya esta todo bien.

    Un saludo 🙂

  5. Afm Afm
    enero 12, 2013    

    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.

  6. Afm Afm
    enero 14, 2013    

    Si esto es lo que necesitaba jeje. Muchas gracias de nuevo la verdad que me estas ayudando mucho sigue asi crack!.

    Un saludo.

  7. enero 15, 2013    

    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

  8. enero 25, 2013    

    jejeje

  9. enero 27, 2013    

    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

    • enero 28, 2013    

      juan me has hecho muy feliz con tu comentario :P, gracias por tu amable comentario.

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

    • 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

    • enero 28, 2013    

      Ya te iba a responder que tenia ese truco en mi blog, saludos amigo 😛

  11. febrero 2, 2013    

    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

    • febrero 3, 2013    

      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!

  12. febrero 2, 2013    

    AMIGO NO TENDRAS AHI UNA ENTRADA PERO CON FONDE OSCURO’
    ESQUE MUCHAS VECES EL BLOGG NO SOLO QUEDA CON FONDO BLANCO..
    ME AYUDARIAS?

  13. febrero 3, 2013    

    GRACIAS ALBERTO ME SIRVIO DE MUCHOO GRACIIAS BENDICIONES !

    YAA HAYDER IGUALMENTE GRACIAS POR TOMAR EN CUENTA MI DUDA !

    SALUDOS DESDE ECUA

  14. febrero 7, 2013    

    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

    • febrero 8, 2013    

      se me habia olvidado poner mi blog para que confirmes http://missolucionespc.blogspot.com/ gracias

    • febrero 8, 2013    

      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.

  15. febrero 26, 2013    

    Buenas, ¿no se podría cambiar el color del fondo de la etiqueta y sustituir “author” por otra cosa?

  16. marzo 24, 2013    

    Aplicado a mi blog (^-^) , nuevamente gracias por tus aportes… Tengo ciertas dudas, pero primero leeré entradas que me interesen…

    Saludos.

  17. junio 7, 2013    

    Gracias por compartirlo con nosotros 🙂

  18. agosto 16, 2013    

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

  19. septiembre 8, 2013    

    De lujo

  20. Gabriel Llantada Gabriel Llantada
    octubre 29, 2013    

    roMpi la plantilla como recupero todo?

  21. Juvinao Juvinao
    octubre 29, 2013    

    Elimina el código que agregaste y ya

  22. junio 4, 2014    

    Gracias!

Deja un comentario

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

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo