Tutorial: Mejora el aspecto de tus comentarios (Parte 2)

Por Makita desde Chile


Continuando con este tutorial para mejorar el aspecto de los comentarios en nuestros Blogs, vamos a centrarnos en el estilo de los comentarios anidados que son las respuestas que se pueden producir respecto a una opinión.



El estilo que se entregará de base es crear un marco, que entrega un efecto de caja, un color de fondo para los comentarios y una personalización a la imagen del perfil que comenta, la haremos redondeada.

Para aplicar esto debes copiar el siguiente código debajo de ]]></b:skin>,  luego de haber ingresado a Edición HTML y haber expandido los artilugios.


<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/AVvXsEhvChl3TzN2ug3J0Tf4BrIP-qAozBzfjKMeG1RpS4cEEAPQpaPkCewDBvLk_tAdUJCGnlgI2Q1HIQh7qiJ5eSbw9xL30CCGicl-wTEUF2qP1oqAaTfcYCYnxMxpfoYt07Mv1CdouWXUGAEL/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>

Lo que se encuentra con rojo es lo que se puede modificar, de acuerdo a sus gustos y a continuación se explica que hace cada una de ellas:

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

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

.comments .avatar-image-container: va la imagen que aparece debajo de cada avatar, si alguien usa imagen transparente en su avatar, se verá esta 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 resaltado de azul: .comments .comments-content .comment-content{text-align:left;} esa regla ya la envía Blogger.

Ahora, solamente debes personalizar la plantilla para que tu Blog quede a tu pinta ;)

Fuente: miltrucosblogger.info/





CONVERSATION

8 ya son Blogger@s:

  1. super que buen tutorial :) me encanta tanto material que ya tenemos acá en bB

    ResponderEliminar
  2. y las imágenes son iguales al anterior?

    ResponderEliminar
  3. Las imágenes hacen referencia al avatar de quien postea, en lugar de aparecer en un cuadrado aparecerá en un círculo.

    ResponderEliminar
  4. Hola! Muchisimas gracias! Es el mejor que he visto por internet :) jejeje. Ha quedado genial :) Un besito!

    ResponderEliminar

Todo comentario que no tenga relación con el post o sobrepase los límites de la libre expresión, será moderado y no saldrá publicado.

Back
to top