Añadir estilos a los avatares en los comentarios

Hace ya unos días, habíamos visto esta nueva opción que nos ofrecía blogger: añadir avatares a los comentarios. Después de esta entrada, surgieron varias preguntas: si se podía modificar el tamaño de la imagen, si podíamos cambiarla a la derecha, añadir algún borde...Hoy vamos a ver cómo hacer todo ésto y más.

Antes de añadir cualquier estilo, ya debemos de tener la opcíon de avatares en los comentarios; las plantillas nuevas ya lo tienen; en cuanto a las antiguas, habrá que modificar un poco la plantilla según esta entrada » Nueva opción en Blogger : avatar en los comentarios.

Ahora, empecemos con los estilos:

♠ Vamos a Diseño - Edición de HTML y con ayuda de CTRL+F buscamos ]]></b:skin>
♠ Antes de ]]></b:skin> es donde pegaremos los estilos para nuestros avatares.

» Si queremos cambiar de lugar o posición el avatar (a la derecha, más arriba, etc.), pegaremos la siguiente clase y modificaremos las propiedades a nuestro gusto:

#comments-block .avatar-image-container {
margin-right:5px;
float:right;
position:static;
}

» Si queremos ponerle un borde al avatar y cambiar su tamaño, pegaremos lo siguiente:

#comments-block .avatar-image-container img {
border:1px solid #000000;
width:36px;
height:36px;
float: none;
}

» Si por el contrario, queremos quitarle el borde que tiene, lo haríamos de esta manera:

#comments-block .avatar-image-container img {
border: none;
}

» Y como algunos preguntaban: cómo cambiar el icono que viene por defecto, por ejemplo, para los usuarios anómimos? Tendríamos que pegar lo siguiente, siempre antes de ]]></b:skin>:

#comments-block .avatar-image-container.avatar-stock img {
display:none;
}

#comments-block .avatar-image-container.avatar-stock {
background:transparent url(AQUÍ-URL-IMAGEN) no-repeat scroll 50% 50%;
}

Creo que éste post responderá a varias interrogantes sobre esta nueva opción de Blogger; si vienen más preguntas, buscaremos las respuestas.