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.

12 opinaron:

Adrián Aratan

Un tutorial buenísmo; absolvió todas mis dudas :)

Responder
La inquisidora

El tutorial está muy bueno, pero quisiera saber cómo hago para ponerle otro tipo de borde, no sé si haya algún codigo.

Please ayuda

Responder
Genial

Justo iba a preguntarte como agrandar el avatr y cambiarlo de lugar, pero me adivinaste el pensamiento jeje.

Besos

Responder
juan carlos
Este comentario ha sido eliminado por el autor.
Responder
juan carlos

El tutorial está completísimo, como siempre

Responder
squirrel

Lo explicaste de una manera muy entendible; me encanta tu tutorial

Un besote :)

Responder
G

El tutorial está genial; sólo tengo una pregunta, el tamaño de la imagen sólo puede ser másximo de 36 px o puede ser más grande.

Un abrazo !

Responder
EmmaX

hola, tengo un problema con los avatares de los comentarios, los de los anonimos no me pararecen
este es mi blog:

http://itaka-music.blogspot.com/2009/08/fito-paez-discografia.html

agradeceria una respuesta, desde ya gracias. Saludos

Responder
Jéssica YK

» Adrián Aratan: me alegra que te sirviera :)

» La inquisidora: para ver los tipos de bordes, te puede servir esta entrada.

» Genial: gracias por tus palabras, pero no creo que tenga poderes extrasensoriales :)

» juan carlos: gracias :)

» squirrel: siempre trato de que mis post sean lo más entendible,y con tus palabras creo que lo estoy logrando :)

» G: sí, puede ser más grande, pero trata de que no sea demasiado grande porque no se vería muy estético.

» Emmax: he visto la entrada que señalas y puedo ver la imagen que pusiste para los Anónimos.
Es extraño que tu no la veas o quizás ya arreglaste el problema.

S@lu2

Responder
Ineex

Excelente, me sirvio de ayuda para mi proximo nuevo proyecto :)

Responder
Anónimo

Muy bueno, lo he usado para agregar una imagen a los anonimos en los comentarios , gracias!

Responder
Jéssica YK

» Ineex: me alegra que te haya sido útil, y me encantará ver tu nuevo blog :)

» Anónimo: qué bueno que te guste; me gustaría ver cómo quedó tu blog así que si deseas que te visite, puedes dejar la URL de tu blog.

S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio