Estilo para los comentarios en blogger

No hay nada mejor que un blog que tenga buen contenido pero que también tenga una adecuada arquitectura, un diseño que agrade a los usuarios que lo visitan, por ello debemos trabajar en mejorar su aspecto. Blogger nos facilita unos comentarios anidados que no son muy llamativos a pesar que son prácticos para dar respuestas a los usuarios. Es por ello que olvidando un poco el posicionamiento web, les comparto el siguiente código CSS para pegar en sus blogs de blogger, incluí algunos comentarios para facilitar los cambios que deseen. 

Dentro de “Editar HTML”, Buscamos ]]></b:skin>. Justo antes pegamos el siguiente código.

<style>
.comments .comment-thread.inline-thread {/*color del fondo del contenedor de respuestas a comentarios*/background-color: #f5e6ad;
}
.comments .comment .comment-actions a {/*estilo para el botón responder*/color: #be961d; font: bold 13px arial;
margin-right: 14px; padding: 3px 9px;
}
.comments .comment-block { /*cuerpo del comentario*/
background: none repeat scroll 0 0 #faf2d3; /*color del fondo del comentario*/border: 4px solid #eacb71; /* color y borde del cuerpo del comentario*/border-radius: 10px;
padding: 3px 10px;
}
.continue a {  /*botón responder localizado de bajo de una respuesta dada*/color: #be961d !important; font: bold 13px arial;
display: inline-block !important;
margin-top: 0px;
padding: 3px 8px !important;
}
.comment-block:hover > .comment-header {/*aspecto del comentario cuando pasamos el mouse por encima, lo desactivé*/
/*border-bottom: 2px solid #000; -moz-transition: border-color .5s ease; */
}
.comment-header a { /*color de la fecha del comentario, también las desactivé*//*color: #FFB43D !important;*/
}
#comments .avatar-image-container img { /*personalización del avatar del comentario*/
border: 2px solid #FFFFFF !important;
border-radius: 50px;
height: 57px; max-width: 57px;
}
.comments .avatar-image-container { /*personalización del contenedor de avatar del comentario*/border: 2px solid #FFFFFF;
border-radius: 34px 34px 34px 34px;
box-shadow: 1px 1px 3px #ABABAB;
float: left; margin-left: -30px;
max-height: 60px !important;
overflow: hidden;
width: 60px !important;
}
/* Código para numerar  los comentarios */
.comment-thread  ol { counter-reset: contarcomentarios; }
.comment-thread li .comment-header:after { content: counter(contarcomentarios,decimal); counter-increment: contarcomentarios; float:right; font-size: 20px; color: #BE961D; margin-top: -4px;}
.comment-thread ol ol { counter-reset: contarbis; }
.comment-thread li li .comment-header:after { content: counter(contarcomentarios,decimal) "." counter(contarbis,decimal); counter-increment: contarbis; float: right; font-size: 16px; color: #BE961D; margin-top: -4px; }
</style> 
El resultado será el siguiente.