Mil Trucos Bloggers

Tutoriales y recursos para Blogger

Select Menu
  • Home
  • Blogging
    • Tutorial Blogspot
    • CSS
    • jQuery
    • Widget
  • Tools
    • Font Awesome
    • HTML Editor
    • HTML Encrypter
    • Code Color
    • Responsive Cek
  • Sitemap
  • Static Page
  • Error Page
Home » Comentarios » Añadele estilo a los comentarios anidados

domingo, 5 de febrero de 2012

Añadele estilo a los comentarios anidados

Add Comment
Comentarios
domingo, 5 de febrero de 2012
Hace ya un par de dias que he agregado un nuevo estilo de comentarios en mi blog,en el cual los avatares son redondos y los comentarios estan enmarcados y separados por lineas azules.


El codigo pertenece a Karla de Compartidisimo que muy generosamente lo ha compartido con todos nosotros.

Para añadir estos estilos a tu blog ve a la Edicion HTML de tu blog y pegas después de  ]]></b:skin> lo siguiente :

 <b:if cond='data:blog.pageType == &quot;item&quot;'> <style type='text/css'> .comments .comments-content .comment-content{text-align:left;} .comments .comments-content .inline-thread {background: #eef2f2; border:1px solid #cedadc;}.comments .comments-content .comment {border-bottom: 1px solid #b2d1d6 !important;} .comments .avatar-image-container {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjLcCrE-OqBVdQnD6yZdHqG5Bij16uhikQcI_x2liZOkI4qKaJi8ETmWvmdgOOeo1PVbJ7ngNoMj7sYOxJkFmmloqjhg6Y3dXNUVYdoM3ReETr5Wq-hHY0h2Q0tN9DxTGzYhR88PntpJnf/s1600/icono-persona-c.png) no-repeat center center; border:3px solid #cedadc;} .comments .avatar-image-container, .comments .avatar-image-container img { -webkit-border-radius:30px;-moz-border-radius:30px;border-radius:30px; } </style> </b:if>
 La parte que puse de rojo son los valores que puedes editar, para cambiar los colores,  donde en:

.comments .comments-content .inline-thread: puse el color del borde (border) y fondo (background) de las respuestas de los comentarios, por eso se ven en "cajitas".

.comments .comments-content .comment: puse el borde (border) que se aplica al fondo de cada comentario, independientemente que sea repuesta o no.

.comments .avatar-image-container,puse la imagen que aparece debajo de cada avatar, si alguien usa imagen transparente en su avatar, se verá ésta como fondo, o bien cuando no haya ningún avatar, por ejemplo en comentarios de usuarios que comenten como anónimos.

Si prefieres el texto justificado en los comentarios, quita todo lo que resalté de azul: .comments .comments-content .comment-content{text-align:left;} esa regla ya la envía Blogger.


Espero que os guste el tutorial y que sigan visitando Mil Trucos Blogger.

Share

Like

G+

Tweet

Tweet
0 Komentar untuk "Añadele estilo a los comentarios anidados"

Add Comments

Entrada más reciente Entrada antigua Página Principal
Suscribirse a: Comentarios de la entrada (Atom)

Popular Week

  • Delicacy-Excelente plantilla Blogger para decoración
    Delicacy-Excelente plantilla Blogger para decoración
    Delicacy es una magnifica plantilla para Blogger que como lo indica el titulo de esta entrada es perfecta para sitios de decoracion, comidas...
  • Como recuperar mi contraseña en Blogger
    Como recuperar mi contraseña en Blogger
    Seguramente que muchas veces les ha pasado que olvidan su contraseña de acceso a su cuenta de Blogger, si has pasado por esta situación sabe...
  • Murciélagos volando que caen y se desvanecen en el blog
    Murciélagos volando que caen y se desvanecen en el blog
    Hoy es el dia de Halloween en todo el mundo y muchos son los que me han enviado solicitudes sobre algun tutorial para este dia, asi que acat...
  • Añadir marca de agua a las imagenes
    Añadir marca de agua a las imagenes
    Muchos bloggueros que comparten imagenes en la red quieren dejar su sello personal en dichas imagenes y que mejor forma que ponerles a las i...
  • Copos de Nieve cayendo en el blog
    Copos de Nieve cayendo en el blog
    Ya casi es navidad y muchos bloggers quieren poner sus blogs acorde al estilo de la epoca, asi que por eso hoy he querido compartir un truco...
  • Menú vertical con CSS3 y jQuery para Blogger
    Menú vertical con CSS3 y jQuery para Blogger
    En Ayuda Blogger he encontrado un maravilloso menu vertical hecho con CSS3 y libreria jQuery que ademas de tener un aspecto genial ahorra m...
  • Cursos para Blogger-Una buena oportunidad para aprender
    Cursos para Blogger-Una buena oportunidad para aprender
    En esta oportunidad quería compartir con ustedes algo muy importante en el mundo de los blogs y son los cursos para Blogger. En estos cursos...
  • ImageBam, Excelente hosting de imagenes
    ImageBam, Excelente hosting de imagenes
    Amigos Bloggero hoy paso a recomendarles un excelente hosting de imagenes y es ImageBam, que es un servicio de almacenamiento que permite gu...
  • Suscripcion por email en Blogger
    Suscripcion por email en Blogger
    Este truco nos permitira la suscripcion via email para nuestros lectores asi nuestras entradas les llegaran a su correo. El recuadro de la s...
  • Rating Widget-Un sistema de calificaciones para tu blog de Wordpress
    Rating Widget-Un sistema de calificaciones para tu blog de Wordpress
    Siguiendo con los tutoriales para Wordpress hablare de un excelente plugin que he usado para agregar un sistema de calificaciones a mis blog...

Labels

  • Anuncios Oficiales
  • Comentarios
  • Concursos
  • Consejos
  • Dominios
  • Efectos
  • Feed
  • Festividades
  • Gadgets y Widgets
  • Humor
  • Imágenes
  • Monetiza tu blog
  • Off Topic
  • Plantillas
  • Recomendados
  • Recursos Web
  • Recursos Wordpress
  • Redes Sociales
  • SEO
  • Trucos Blogger
  • Tutoriales Blogger

Blog Archive

  • ►  2014 (20)
    • ►  enero (20)
  • ►  2013 (322)
    • ►  diciembre (34)
    • ►  noviembre (31)
    • ►  octubre (35)
    • ►  septiembre (33)
    • ►  agosto (42)
    • ►  julio (13)
    • ►  junio (17)
    • ►  mayo (26)
    • ►  abril (30)
    • ►  marzo (22)
    • ►  febrero (15)
    • ►  enero (24)
  • ▼  2012 (171)
    • ►  diciembre (19)
    • ►  noviembre (20)
    • ►  octubre (13)
    • ►  septiembre (15)
    • ►  agosto (10)
    • ►  julio (10)
    • ►  junio (8)
    • ►  mayo (15)
    • ►  abril (12)
    • ►  marzo (15)
    • ▼  febrero (19)
      • Elegance Gallery-Plantilla Premium para Blogger
      • Minus-10 GB par almacenar archivos (ampliables a 5...
      • Emoticones para los Comentarios Anidados en Blogger
      • Boton Subir con efecto de Opacidad y Desvanecimiento
      • Anuncio flotante con efecto de retraso en Blogger
      • IntenseDebate:Sistema de Comentarios Estilo Wordpress
      • Uso del Facebook según la edad-Comic
      • Conoce el ranking de tu web
      • Globos que caen y se desvanecen en el blog
      • Si estamos Estrenando nuevo Diseño-No te equivocastes
      • Marcadores Sociales con efecto de Opacidad y TipTip
      • Rosas que caen y se desvanecen en el blog
      • Más Espacios Publicitarios en Mil Trucos Blogger
      • Diary/Notebook-Plantilla Premium para Blogger
      • Emoticones "Smilies Elegant" para Blogger
      • Menú de redes sociales con CSS Sprites
      • Añadele estilo a los comentarios anidados
      • Super Clean-Plantilla Premium para Blogger
      • Blogger comenzará a redirigir los dominios blogspot
    • ►  enero (15)
  • ►  2011 (186)
    • ►  diciembre (20)
    • ►  noviembre (16)
    • ►  octubre (16)
    • ►  septiembre (16)
    • ►  agosto (18)
    • ►  julio (19)
    • ►  junio (22)
    • ►  mayo (25)
    • ►  abril (28)
    • ►  marzo (6)

Labels

  • Anuncios Oficiales
  • Comentarios
  • Concursos
  • Consejos
  • Dominios
  • Efectos
  • Feed
  • Festividades
  • Gadgets y Widgets
  • Humor
  • Imágenes
  • Monetiza tu blog
  • Off Topic
  • Plantillas
  • Recomendados
  • Recursos Web
  • Recursos Wordpress
  • Redes Sociales
  • SEO
  • Trucos Blogger
  • Tutoriales Blogger

Labels

  • Anuncios Oficiales
  • Comentarios
  • Concursos
  • Consejos
  • Dominios
  • Efectos
  • Feed
  • Festividades
  • Gadgets y Widgets
  • Humor
  • Imágenes
  • Monetiza tu blog
  • Off Topic
  • Plantillas
  • Recomendados
  • Recursos Web
  • Recursos Wordpress
  • Redes Sociales
  • SEO
  • Trucos Blogger
  • Tutoriales Blogger

© Mil Trucos Bloggers Published By Kaizen Templates powered by Blogger.com.
All Right Reserved By .