Siguiendo con las cosas fáciles e incluyendo una que algunos pedís más que un taxi en un desierto, hoy un
simple CSS que cambia el estilo que viene de serie con los comentarios anidados de una plantilla estándar Blogger.
Con él los comentarios se quedarán como podéis ver en esta demo, aunque en realidad es el mismo estilo que actualmente utilizo en este mismo blog. http://zonadebarrio.blogspot.com.es/2012/12/llaves-claves-seriales-nod-32-3-4-5.html
Como veis lo único que hacemos es ponerle un fondo distinto a lo que es el cuerpo principal del comentario, añadir un borde, esquinas redondeadas y añadirle un triángulo que realmente es una entidad HTML. En Nice Entity tenéis una útil guía organizada por pestañas según temática con este tipo de caracteres por si alguna vez la necesitáis.
Para usarlos en content tenéis que echar mano de la columna UNICODE. Aquí he usado el 25C4 (con una barra de escape) que aislado se vería como sigue ◄. Como realmente el navegador lo trata como "letra", se puede cambiar de tamaño y color con font-size y color sin ninguna dificultad añadida.
La segunda mitad del código lo que hace es mostrar los avatares en forma de círculo, ni más ni menos.
Lo único que necesitáis para tener este estilo en vuestros comentarios es copiar el código que viene a continuación dentro de la parte CSS de la plantilla, es decir, entre <b:skin><![CDATA[/* y ]]></b:skin>. Luego ya cambiáis los colores al gusto.
/* Estilo bocadillo comic */
.comments .comment-block {
position: relative;
margin-top: 10px;
margin-left: 60px;
padding: 10px;
color: #333333;
background: #eeeeee;
border: 4px solid #990000 !important;
border-radius:10px;
}
.comment-thread li .comment-block:before {
position: absolute;
left: -26px;
content: "25C4";
color:#990000;
}
.comments .avatar-image-container {
width: 60px;
height: 60px;
max-height: 60px;
margin:0 0 0 -22px;
padding: 0px;
border: 4px solid #990000;
border-radius: 60px;
}
.comments .avatar-image-container img {
overflow:hidden;
width: 60px;
height: 60px;
max-width: 60px;
border:0 !important;
border-radius:60px;
}