96

Icono delante del autor del comentario

Hace algún tiempo había explicado como eliminar los iconos de Blogger en los comentarios.

Algunos os habéis interesado por la forma de hacer que en el lugar donde antes estaban esos iconos, es decir, antes de cada nombre del autor del comentario, se muestre un icono escogido por nosotros.


[1] Para mostrar el icono (el mismo para todos los comentaristas), una vez eliminados los iconos de Blogger, localizamos esta línea de CSS en nuestra plantilla:

.comment-author {

Justo debajo de esa línea colocaremos estas otras líneas de CSS:


background: url (Url de laimagen-icono) left no-repeat;
padding-left: 20px;


Tendría que quedar algo así:

.comment-author {
background: url (Url de laimagen-icono) left no-repeat;
padding-left: 20px;

El resto del código que ya teníamos aquí.
}

Donde dice padding-left:20px; tendremos que cambiar el valor, es decir el número 20, por más o menos el ancho que tenga nuestro icono, para evitar que la imagen se vea sobre parte del nombre del autor del comentario.


[2] También podemos añadir un icono para nuestros comentaristas que distinga unos de otros, o sea, tendríamos una imagen para nuestros comentarios (autor del blog), otra para los comentaristas anónimos (que no dejan url) y otra para los demás (que dejan su url).

Esto lo conseguimos de la forma, no demasiada complicada, que Jmiur nos explica en  esta entrada de Vagabundia .

En nuestro panel de diseño, iremos a edición html y con la plantilla de artilugios expandida, localizamos esta parte del código:

<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>


Y lo cambiamos por este otro:

<b:if cond='data:comment.authorUrl'>
<!-- autor reconocido -->
<b:if cond='data:comment.author == "MI_NICK"'>
<!-- mis propios comentarios -->
<img class='comenta-avatar' src='URL_IMAGEN_YO'/>
<b:else/>
<!-- comentarios de los visitantes -->
<img class='comenta-avatar' src='URL_IMAGEN_OTROS'/>
</b:if>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<!-- comentarios anónimos -->
<img class='comenta-avatar' src='URL_IMAGEN_ANONIMO'/>
<data:comment.author/>
</b:if>


Fijaros que donde dice MI_NICK tendremos que poner el nombre con el que publicamos en Blogger, exactamente como aparece en nuestro blog.

Sustituimos  donde dice URL_IMAGEN... por la url  del icono que vamos a usar en cada caso.

Entradas Relacionadas:

96 comentarios:


Ѕilυiα

Nada Rosa, lo estoy intentando pero no me va... me pone que algo está mal formado :(

Unknown

Yo tenía la imagen de los perfiles pero demoran mucho en cargar, como ahora tenemos el formulario antiguo la imagen queda en él y estos iconos, en mi caso son gatitos jejeje :D que pones alivianan la carga de la página de entrada :) Muchas gracias! :)

un besote y un abrazo!!!!!!!!!

Admin

Gracias rosa lo aplique y me salio perfecto

Muschas Gracias

Ѕilυiα

Ya me ha salido Rosa, queda perfecto, muchas gracias!

Anónimo

Olá Rosa, Boa noite.
Estou sempre por aqui, garimpando boas idéias.

Seu Blog é mais que dez. Tanto que tenho um caminhio direto entre meu blog e o seu.

Parabéns!

Anónimo

Ademar, muchas gracias!:-)

Pamen

Tengo una duda. ¿¿Hay alguna forma de mejorar la visualización de un blog en Intenet Explorer??
El caso es que mi blog se ve perfecto en Firefox3 pero en IE7 se ve pegado a la izquierda, (sobra un gran margen derecho), además de otros errores que da de vez en cuando. No soy partidaria de usar IE pero la mayoría de usuarios de mi blog lo hacen, así que me gustaría hacer algo. No se si sabrás. Por cierto esto solo pasa en pantallas rectangulares o en pantallas cuadradas llevando la barra de desplazamiento inferior al tope derecho. Ah y el truco del icono me funcionó genial!!! Mil gracias.

Pamen

Bueno me reexplico: Hay alguna forma de ajustar el ancho y que no me sobren esos márgenes innecesarios???, que además también aparecen en Firefox, aunque menos que en IE. Hay que lios me traigo.!! Saludos y gracias de nuevo

Anónimo

Mari Carmen, depende de la resolución de pantalla más que del navegador, por ejemplo con mi resolución (1280) veo tu blog perfectamente en los dos exploradores, bien centradito, y sin barra inferior...

Pamen

Es cierto Rosa, yo también lo veo bien a 1280 solo espero que la gente lo pueda ver bien a 1024. Además de eso he detectado que puede ser por darle zoom (ctrl+ruedadelratón). Muchas gracias, seguiré aplicando tus buenos consejos.

Pamen

Aun así a 1280 y aunque esté centradito sigue habiendo mucho margen que me gustaría quitar, o en su lugar ensanchar el espacio donde se escribe. Hay alguna forma? Saludos y gracias.

Unknown

Hola Rosa he seguido los pasos primero para eliminar los iconos de Blogger. Ahora cuando intento poner el icono delante del comentario del autor buscando en la plantilla con los artilugios expandidos no encuentro el código
.comment-author {
Creo que no estoy haciendo algo bien o quizás puede influir la plantilla que tengo que es la Son of Moto.
Muchísimas gracias por tu ayuda

Anónimo

Adrián , no necesitas expandir la plantilla para encontralo, aún así ya te digo yo que tu plantilla no lo tiene.
Como es de Blogger original y se rige normalmente por los mismos códigos que las otras, vamos a tratar de incluirlo...
Verás, localiza esto:
/* Profile
------------------- */

Y debajo mismo incluye el código directamente así (ten cuidado con las llaves no borres ninguna):

.comment-author {
background: url (Url de laimagen-icono) left no-repeat;
padding-left: 20px;
}

Unknown

Muchísimas gracias Rosa, ya podía yo buscar el código :) voy a probar a ver si me da resultado. Eres todo un amor :-L

Anónimo

Mari Carmen, mira en esta entrada:
http://elescaparatederosa.blogspot.com/2007/11/ensanchar-la-plantilla-mnima.html

Pamen

Muchas, gracias, me ha funcionado perfecto

Anónimo

Hola Rosa, llevo días intentando poner la imagen adelante del autor del comentario sin resultado, no tengo el código .comment-author { lo intenté poner en donde dice .blog-author-comment { para ver si quedaba ya que veo el blog para ver como quedó si se mueve un poco el nombre del autor pero la imagen no se ve...la imagen que estoy poniendo es de 32px, no se que pueda estar sucediendo, pensé que tal vez por se imagen png no se veía pero ya he puesto imagenes con esa extensión en otros lugares del blog y si se ven, no se que sea lo que está sucediendo, mi plantilla no es la original del blogger. Espero me puedas ayudar con esto, muchísims gracias guapa!! bye.

Anónimo

Ah también cambié el valor del padding-left:20px a 32px, eso se me olvidó decirte...

Anónimo

Alondra prueba añadiendo directamente el :
.comment-author { en la plantilla.

Anónimo

Creo que ya lo logré, lo agregué como me dijiste, y también tuve que poner altura porque la imagen no se veía ni de arriba ni de abajo, solo lo del medio... puse el código directo así

.comment-author {
background:url(http://img412.imageshack.us/img412/1088/start32ym3.png) left no-repeat;
height:30px;
padding-left: 35px;
}

Gracias Rosa!!!

Anónimo

Alondra, ¡Bien por tu estrellita!:D

Unknown

Buenisimo elblog!!! te e linkeado y puesto tu banner en mi pagina www.negocio-tu.blogspot.com/ ,te visitaré a menudo

Anónimo

Genial!
Ya lo coloqué en mi blog y quedo súper lindo :$

Gracias Rosa
Saludos
Byeee

Unknown

Ya sabes, soy el rezagado, pero lo acabo de poner, ¡¡GENIAL!! Gracias Rosa!

Jose
Este comentario ha sido eliminado por el autor.
Anónimo

Jose, si no tienes el .comment-author { puedes añadirlo directamente.

Jose

Hecho Rosa. Ha quedado muy bien.Muchísimas gracias de nuevo por tu paciencia y atención con tod@s nosotr@s.
Un abrazo de los buenos,buenos.

°Sandra...

Hola Rosa, estoy tratando de hacer esto pero la imagen me queda arriba del nombre, no encuetro como poder colocarla al lado del nombre. Gracias :)

Anónimo

Sandra, tienes el código así:
.comment-author {
background: url (http://img125.imageshack.us/img125/7250/redflower32x32ic4.png) left no-repeat;
padding-height:30px;
padding-left:35px;
}
La línea que dice padding-height:30px; no puede usarse en css, no podemos darle una separación (padding) a una altura (height) borrala.
Si es necesario aumenta algo más el valor en padding-left, me da la impresión de que la flor necesita más espacio...

°Sandra...

Gracias Rosa, ya quité esa parte del código, y puse más valor al left, estuve intentando con varios valores pero no da resultado la imagen ni siquiera se mueve un milímetro, le dejé en 60px, no se a que se deba!

Anónimo

Sandra, mira este código que tienes en la plantilla:
img {
border: 0;
display: block;
}

Quita lo de display: block;

No estoy segura del todo...pero por probar...

°Sandra...

Rosa ahora si quedó muy bien, muchísimas gracias!! :P

Anónimo

Sandra, ¡Ole! :D

Tiritan las estrellas

Felicidades por este blog Rosa!

Tiritan las estrellas

He estado leyendo este interesante post.

Me he preguntado si podría añadir más iconos, es decir, uno para mí, otro para otra persona identificada con un nick, otro para el resto, y otro para los anónimos. Si esto fuese posible, hay un límite de iconos? O puedo adjudicar a cada uno el suyo?

Muchas muchas gracias!:D

Anónimo

Tiritan, uno para ti, uno para los que comentan con nick (logueados) y otro para anónimos, tal como explico en la entrada, es lo que puede hacerse que yo sepa.

Cocina

Hola rosa es mi primera vez en tu blog,me gustaria saber como puedo poner emoticones en mi blog y si esto puede traer inconvenientes, ya que con la musica tuve problemas y con varios accesorios mas que tuve que retirar.te agradeceria tu respuesta. clau

Anónimo

CLAU, ese tipo de problemas depende mucho de otras cosas que estés usando en la plantilla.
Hay códigos o script que podrían interferir unos con otros, pero eso es difícil saberlo antes de probarlo...

Arriba en el menú de etiquetas, puedes ver una que dice "Emoticones" pincha ahí y revisa las entradas al respecto.

Paramatma

Rosa buen dia!!!

He implementado que al lado de cada comentarista (en los comentarios comunes) salga un avatar o imagen. Las he modificado a un buen tamaño y con un fondo transparente hasta alli todo marcha bien.

Lo que pasa es que no me sale al lado del nombre del autor o del anonimo sino encima, te adjunto una imagen para q la revises y me digas q puede ocurrir o como lo corrijo, te pinte con color amarillo donde quisera o deberia de aparecer la imagen.

Muchas gracias.

Imagen

Anónimo

GOCASE Por lo que puedo ver en esa imagen, esa mancha amarilla que supongo ya estaba antes en tu plantilla, debe ser una imagen aplicada delante del autor del comentario, así que abría que retirarla para que las otras ocuparan su lugar...

Paramatma

Hola Rosa, no la mancha amarilla la hice con piant de donde queria q estuviera la imagen pero ya JMiur muy solidario me ha dado algunas pautas.


Te molestare si algo.

Un abrazo desde Colombia

Anónimo

GOCASE ajajaja, y yo pensando que era del diseño del template...

Unknown

Rosa, quiero cambiar los icono que tengo ahora y no se de donde conceguir otros jaja :D

Anónimo

TRECARUNGA Los que usaba yo creo recordar que eran de Iconlet, pones person o personal en su buscador.
http://www.iconlet.com/

Unknown

Muchisimas gracias Rosa :)

Unknown

Listo, solo cambie el de anónomo, a los mios puse mi favicon, y a los otros les dejé el que tenian :)

Unknown

gracias, funciono de maravilla, le puse mi favicon a todos excepto a los anonimos q le puse un icono de anonimos, lo q si, me quedaron un poco arriba :S

PX

No me sale la imagen que subi?!

Anónimo

PXProbablemente no estás usando la url correcta, o algo has hecho mal...no puedo ver tu blog, así que no puedo ayudarte más.

Verónica C.

Hola Rosa, seguí los pasos y me salen el icono de blogger al lado del icono que subí Ejemplo .

Hay alguna forma de borrar el icono de blogger?
Muchas gracias :)

Anónimo

Veronica Justo al comienzo de esta entrada tienes el enlace a la entrada donde explico eso...:S

Delincuente

Hola rosa, en caso de que mi blog tenga varios autores que deberia colocar para agregar una imagen a este autor?

¿Y podria agregar una imagen tambien para el usuarios del blog que comenta mas?

Definir
autor
autor2
anonimo
visitas
(el que mas comenta)

Anónimo

Delincuente Sería algo así:

<b:if cond='data:comment.authorUrl'>
<b:if cond='data:comment.author == "AUTOR"'>
<!-- autor 1 -->
<img class='comenta-avatar' src='URL_AUTOR'/>
<b:else/>
<b:if cond='data:comment.author == "AUTOR2"'>
<!-- autor 2 -->
<img class='comenta-avatar' src='URL_AUTOR2'/>
<b:else/>
<!-- comentarios de los visitantes -->
<img class='comenta-avatar' src='URL_VISITAS'/>
</b:if>
</b:if>
<a expr:href='data:comment.authorUrl' rel='nofollow'>
<data:comment.author/>
</a>
<b:else/>
<!-- comentarios anónimos -->
<img class='comenta-avatar' src='URL_ANONIMOS'/>
<data:comment.author/>
</b:if>

En cuanto al que comenta más, supongo que te refieres a que se sepa digamos de forma automática, y eso no se como hacerlo.
Otra cosa es que tu sepas que es "fulanito" y quieras añadirlo, pero claro...cuando deje de serlo no te servirá...

Theemilio_crazy

Hola rosa Bonito blog. espero que me ayudes jeje. esta es mi pregunta:

Ok ya tengo todo y si quiero poner otro avatar de otra persona aparte del mio??? como le hago

Gracias. eres la mejor :)

Anónimo

Theemilio_crazy Acabo de responder a eso mismo en el comentario anterior...

Theemilio_crazy

Gracias Rosa no me fije.jejeje. Gracias eres la mejor.:)

Theemilio_crazy

Rosa perdon, pero no me funciona y cuando le borro un codigo a ver si asi funcinaba funciono, pero se duplicaba el nombre de los comentarios.

Theemilio_crazy

espero que me puedas ayudar mi msn es theemilio_crazy@hotmail.com

Anónimo

Theemilio_crazy Has borrado uno de los comentarios (a mi me llegan igual a mi mail) en el que decías que te salía un error de que faltaba un cierre a una etiqueta dt...eso me indica que algo no estás colocando bien, porque esa etiqueta si la plantilla está bien, debería estar más arriba...¿estás seguro que el código que sustituyes es el correcto?

Theemilio_crazy

ya me salio todo bien, pero cuando quiero poner otro autor del blog me marca un error el mismo error que el del comentario borrado, entonces no se como hacerlo... Espero que me puedas ayudar nuevamente. :)

Anónimo

Theemilio_crazy Fijate en el comentario que te dije, en el código y mete lo que necesitas, si ya tienes lo demás:

<b:if cond='data:comment.author == "AUTOR2"'>
<!-- autor 2 -->
<img class='comenta-avatar' src='URL_AUTOR2'/>
<b:else/>

Theemilio_crazy

Rosa no pude introducir mas de 3 autores, me tira el mismo error del comentario que borre... ya no se que hacer y quiero añadir mas de dos autores:(

Anónimo

Theemilio_crazy Pues no se que más decirte la verdad, este mismo sistema lo han usado antes varias personas (ayer mismo una chica) y sin problemas...

Theemilio_crazy

Ya pude Hace mucho. :D

Cocina

Hola ROSA !
Te queria decir con respecto al cambio de iconos en los comentarios, que no pude encontrar la linea ".comment-author {" ya que mi plantilla no lo tiene. puede que no me sirva?
Desde ya Muchas Gracias beso.

Anónimo

COCOFANSCLUB Si estos bien segur@ de que no está, añadela (siempre antes de ]]></b:skin>):

.comment-author {
background: url (Url de laimagen-icono) left no-repeat;
padding-left: 20px;
}

Cocina

HOLA ROSA !
TE MOLESTO OTRA VEZ,TE CUENTO QUE PUDE ELIMINAR LOS ICONOS BLOGGER DE LOS COMENTARIOS PERO NO LOGRO REEMPLAZARLOS BUE... CONCLUCION ME QUEDE SIN NADA PORQUE AHORA NO PUEDO RECUPERAR EL DE BLOGGER!!!DE TODOS MODOS GRACIAS IGUAL POR TU AYUDA
BESO ROSITA

Anónimo

COCOFANSCLUB ♥ ¿Es que no has guardado una copia de tu plantilla antes de hacer los cambios? Deberías hacerlo siempre o usar un blog de pruebas para probar este tipo de cosas.
Para recuperar los iconos de Blogger, haz lo mismo que hiciste para quitarlos pero al revés, vuelve a poner lo que eliminaste siguiendo las instrucciones de la misma entrada.

Okaa-san

Hola rosa!!
Sabía yo que no tardaría en volver a preguntarte sobre algo jajaj.
Mira hace unos dias que intenté hacer esto de los iconos y si, me salió (al menos se ven).

El problema es el icono que puse para mi, que sale siempre delante de los otros(da igual si lo publico yo, o un amigo o un anonimo) y no se xq ._.u

mira:
http://img35.imageshack.us/img35/9606/dibujokvm.jpg

Espero que puedas ayudarme porque me estoy volviendo tarumba y no quiero tocar nada no vaya a ser que la pifie U_Uu Gracias!
Sale así:

Anónimo

Okaa-san ¿No habrás añadido las dos formas de hacerlo? En tu caso solo tienes que seguir las indicaciones de la entrada desde el paso [2]

Okaa-san

Ohhh vale!! solo tenia que quitar :

background: url (Url de laimagen-icono) left no-repeat;

jajaja Muchas gracias!!

Anónimo

Okaa-san Je,je, así es, habías puesto los dos :D

Anónimo

gracias rosa por la explicación me ha quedado genial de momento son de 16 para ver como quedaban pero le voy a dar al photoshop para cambiarlo a 20 que se ven un poco pequeños pero igualmente genial un saludo :)

Jean Paul

funciona pero tengo un probelma solo pude ser una imagen de 24x24 no puedo colocar una mas grande si sale pero se corta una parte de arriba y otra de abajo ayudame porfavor :$

Unknown

Hola Rosa antes que nada quiero felicitarte por tu blog, es magnifico, ahora bien he intentado un monton de veces incorporar la imagen al lado del comentario pero no lo logro, mi plantilla no tenia el comment-author asi que se lo agregue este es

.comment-author {
background: url (http://www.fileden.com/getfile.php?file_path=http://www.fileden.com/files/2009/7/5/2499039/pp-blank-thumb.ico) left no-repeat;
height:32px;
padding-left: 32px;

}

Así y todo aparece el lugar en blanco al lado del nombre del comentarista pero no la imagen, me podrias ayudar?, Muchas gracias y saludos

Anónimo

99 - LaGranDT El código es el correcto y por eso "te hace" el espacio para el icono.
El problema es que no estás usando la url correcta de la imagen, la url que usas es la de descarga del icono y no la directa a la imagen.

Unknown

Te agradezco Rosa la respuesta, probe con otra url que aloje directamente la imagen y me pasa lo mismo, quizas en algun momento modifique la platilla y saque algo que ahora estoy necesitando, no importa muchas gracias.

marta

Hola rosa y lectores, por casualidad encontré esta página http://en.gravatar.com
Es para que cada comentarista pueda tener su propio avatar, me pareció muy interesante.

SALUDOS!!

Anónimo

99 - LaGranDT No tiene nada que ver con un cambio anterior, es la url que no es correcta. Se trata de que en el alojamiento de la imagen te dan varias url para distintas funciones, y tu has escogido la que se usa para descargar la imagen, no para mostrarla.

Anónimo

master Gracias, aunque ya conocía el sistema... el problema es que poca gente tiene su gravatar.

Play

Hola rosa yo tengo instalado lo de estos iconos para los comentaristas, pero ahora lo quiero poner como lo veo :O en casi todos los blog(Aquí, banakabanaka, vagabundia) que tienen es la imagen del perfil de blogger y cuando no tienen imagen colocar la que una predetermine.

Anónimo

cargohe Encuentras la explicación en esta entrada:
http://elescaparatederosa.blogspot.com/2009/04/ultimos-comentarios-personalizados-con.html

Play

Rosa pero yo me refiero al iconos de los comentarios normales, por ejemplo tuyo sale una mujer en una pc y cada quien sale con el de su perfil. por que yo los tengo es que el autor un icono y cualquier que registrado otro icono y anonino otro icono y yo quiero poner es la imagen del perfil de cada quien.

Anónimo

carhoe ¡Entendido!
Es una nueva función de Blogger y encuentras toda la información sobre como implementarlos en Vagabundia.

Martin

Hola Rosa, desde hace un tiempito tu blog me ha sido de gran bendicion. MUCHAS GRACIAS..!!:P tengo un blog: http://actualidadcristiana.blogspot.com el cual he puesto los comentarios con iconos, "muchas gracias".;) PERO QUIERO SUGERIRTE UNA COSA. me gusta el diseño que tu llevas en este Blog, ¿PODRIA YO TENER ESE DISEÑO? lo publicarias o me lo mandarias por E-mail..... desde YA..!! muchas gracias, DIOS LE BENDIGA...:)

Anónimo

Martín Mundaraín Mi blog es la plantilla Mínima de Blogger modificada poco a poco por mi y cada cosa o cambio que en el blog hago, está publicado en el mismo...

RRS

Rosa no me funcionó :(

Cipri M.A.

Pero una cosa...
En la primera opción, ¿Cómo eliges la imagen que quieres poner?
He visto muchas de tus entradas y debo felicitarte por tu excelente trabajo. Gracias, de verdad.

Rosa

Cipri M.A. Pues se elige tal como explico en la entrada...

¿Porque no usas el sistema de Blogger?... es más sencillo y automático, mira aquí:

http://elescaparatederosa.blogspot.com/2009/09/nuevo-editor-y-avatar-en-comentarios.html

Cipri M.A.

Vale. Muchas gracias Rosa.

Mento

una pregunta como pones el avatar delante del autor? ya he logrado poner iconos para los visitantes y anonimos pero queda un poco feito xq el avatar queda mas a la izq.

Anónimo

el Chico Misterioso Usando CSS, en Vagabundia puedes encontrar la explicación completa.

Unknown

Hola ROSA estoy que pataleo con esto e intentado varias maneras de colocar los codigos pero no me sale y antes de seguir pruebe y pruebe quiero saber si esta parte es a lo que te refieres con
.comment-author { pues esto lo encontre en esta parte y quiero saber si debo de pegarlo debajo de esto que encontre o es que mi plantilla no lo tiene agradezco tu respuesta.

#comments-block .comment-author {
margin: .6em 0;
color:#0066CC;
font-weight: bold;
font-size: 20px;
}

Esto lo encontre debajo de donde dice /* Comments
----------------------------------------------- */

digo esto porque mas arriba lei que lo pegaran debajo de
/* Profile
----------------------------------------------- */

y pense que talvez ese es su lugar correcto y no donde te decia al comienzo

Espero me hallas entendido y gracias una vez mas

Anónimo

DUDSHAN Antes de nada... ¿estás seguro que quieres usar esto?... era lo que todos usábamos cuando en Blogger no se podían mostrar las imágenes de perfil como ahora (como en mi blog):

http://elescaparatederosa.blogspot.com/2009/09/nuevo-editor-y-avatar-en-comentarios.html

Unknown

Estimada ROSA voy a revisar lo que me recomiendas lo que sucede es que es tan interesante lo que colocas que me dan ganas de colocar todo :) estoy emocionado como va quedando mi blog.

Gracias una vez mas

Anónimo

DUDSHAN Me alegra que estés disfrutando con los cambios... te recomendé eso porque es lo que todos usamos ahora, ya que está esa posibilidad mejor que no andar con más líos de códigos, además de que la página carga más rápido.

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S