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 == "item"'> <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/
super que buen tutorial :) me encanta tanto material que ya tenemos acá en bB
ResponderEliminarPoco a poco vamos creciendo!! :)
ResponderEliminarQue chevere me encanta su blog
Eliminary las imágenes son iguales al anterior?
ResponderEliminarLas imágenes hacen referencia al avatar de quien postea, en lugar de aparecer en un cuadrado aparecerá en un círculo.
ResponderEliminarGracias :) muy buen post
ResponderEliminarGracias!!
EliminarHola! Muchisimas gracias! Es el mejor que he visto por internet :) jejeje. Ha quedado genial :) Un besito!
ResponderEliminar