JMiur [E]

Esta es una modificación a un truco mostrado hace un tiempo en una serie de artículos que hacen referencia a como personalizar un poco los comentarios de Blogger, agregándoles un número de orden, una imagen diferencias según sea el autor y un color de fondo alternado [1 2 3].

Recientemente, Opcionez preguntaba si era posible combinar todo y agregarle una algo más: que el fondo de los comentarios del administrador del blog apareciera de un color diferente a los otros.

En este caso, no se trata de destacar los comentarios que hacemos nosotros mismos en nuestro propio blog, si sólo es eso, podríamos remitirnos a las explicaciones que nos entrega Rosa en su post y no tendremos problemas.

La idea es sencilla, creamos una clase CSS especial y en la plantilla, usamos los códigos condicionales para determinar cuáles son nuestros comentarios y cuales no. Pero, en este caso, el tema se nos complica un poco más ya que tenemos dos clases CSS, una para los comentarios pares y otra para los impares así que debemos agregar una tercera.

Primero, entonces, vamos a crea esa clase que agregaremos en la plantilla antes de </b:skin>:
.comentarioPropio { /* propiedades para nuestros comentarios */
/* pondremos las mismas que para los otros comentarios */
/* y, como ejemplo usaremos otro color de fondo */
background-color: #color;
}
Por supuesto, podemos poner cualquier otra, utilizar fuentes diferentes, de otro tamaño, agregarle un borde, etc.

Ahora, modificaremos el script que es el que cambia las clases CSS. Ahí le transferiremos un dato más, el nombre del autor del comentario:
<script type="text/javascript">
function ContarC(cual,quien) {
if (quien =='NUESTROnombre') {
document.getElementById(cual).className='comentarioPropio'
} else {
var resto;
resto = contadorComentarios % 2;
if (resto == 0)
document.getElementById(cual).className='comentarioPar'
else
document.getElementById(cual).className='comentarioImpar'
}
}
</script>
Donde deberemos cambiar el texto NUESTROnombre por el que nos identifique.

Por último, expandiendo los artilugios, buscaremos la llamada al script que, en este momento dirá:
<!-- establecemos la clase del comentario -->
<script type='text/javascript'>
ContarC('<data:comment.id/>')
</script>
y lo reemplazaremos por esto:
<!-- establecemos la clase del comentario -->
<script type='text/javascript'>
ContarC('<data:comment.id/>','<data:comment.author/>')
</script>

24 comentarios:

Opcionez  

Ya lo he probado y funciona a la perfección.

Solo un pequeño detalle:

En tu post tienes así:
ContarC('<data:comment.id/>','<data:comment.author/'>)

Solo la ultima " ' " debe ir después de ">"

Error de dedo seguro, pero por eso no podía guardar. :-P

Y queda así:
ContarC('<data:comment.id/>','<data:comment.author/>')

Fuera de eso todo salio bien, gracias JMiur (de nuevo). La verdad si le da un toque mejor para resaltar nuestros propios comentarios.

Responder
JMiur  

Me alegro que sirviera :)

Gracias por la advertencia, ya está corregido el "desliz" :D

Responder
Lores  

Holaaa JMiur... estaba viendo y bueno se me ocurrio hacerte una pequeña pregunta... Y si estamos compartiendo nuestro blog con alguna persona mas?.. ya sea esta privilegios de administrador o solamente pueda postear... en ese caso? Puede ser que funcione con un (quien == 'NOMBRE1','Nombre2')????

Responder
JMiur  

Lore:

En ese caso, verificamos ambos nombres. Para no complicar mucho el script y seguir con la misma idea, podría ser algo así:

function ContarC(cual,quien) {
if (quien =='PRIMERnombre') { document.getElementById(cual).className='comentarioPropio'
} else if (quien =='SEGUNDOnombre') { document.getElementById(cual).className='comentarioPropio'
} else {
var resto;
resto = contadorComentarios % 2;
if (resto == 0) document.getElementById(cual).className='comentarioPar'
else document.getElementById(cual).className='comentarioImpar'
}
}

Sólo le agregué esa parte en negrita.

Responder
Darka Treake  

Hola!!

Buscando y buscando, navegando y navegando, he llegado aquí. Y al ver que sabéis bien de lo que hablais, os hago la siguiente pregunta, a ver si me podéis echar un cable:

He cambiado la plantilla, y en la nueva, entre otras cosas, lo que menos me gusta, es que los comentarios que aparacen al final de cada entrada se ven todos juntos, seguidos y apretujados...
El caso es que es practicamente ilegible.
¿Podéis decirme cómo separarlos?
¿Cómo poner algún espacio entre comentario y comentario?

En este enlace entenderéis lo que os digo:
http://modt.blogspot.com/2008/04/problemas-tcnicos.html

Muchas gracias!!
Darka.

Responder
JMiur  

Por lo que veo en tu sitio, no hay propiedades CSS para esa parte así que, primero que nada, habría que agregarlas para, desde allí, poder personalizar o modificar las cosas.

En este caso, la propiedad necesaria sería margin que se usa así:

margin: valor valor valor valor;

el orden de los valores es arriba derecha abajo izquierda así que, por ejemplo:

margin: 10px 0px 20px 50px;

separa "algo" 10 pixeles de lo que está a arriba, nada de la derecha, 20 de lo que está abajo y 50 de la izquierda.

Justo antes de </b:skin>, agrega esto:

.comment-author {margin: 10px 0 10px 0;}
.comment-body {margin: 10px 0 10px 0;}
.comment-footer {margin: 10px 0 10px 0;}

comment-author es la línea con el nombre del autor del comentario
comment-body es el comentario en si mismo
comment-footer es el pie (la fecha)

Con esas propiedades, cada sector se separará del otro. Por supuesto, los valores deberás ajustarlos a tu gusto.

Responder
Darka Treake  

Funciona a la perfección!!!

Muchísimas gracias!! de verdad... Porque estaba comenzando a desesperarme...jejeje
de verdad, muchas gracias.
Para más dudas volveré, y al que os necesite, os recomendaré.

Gracias otra vez, sobre todo por la velocidad de respuesta!!
Darka

Responder
JMiur  

No es nada, Darka, la velocidad es más que nada, fruto de la casualidad.

Me alegro que haya servido :)

Responder
Opcionez  

Darka Treake: Jmiur es otra cosa, el diseño de mi blog no sería el mismo sin él.

Gracias por la Ayuda JMiur :)

Responder
Fdo. R. Baños  

Me uno al comentario de Opcionez: en cuanto a diseño, mi blog a evolucionado gracias a la ayuda siempre puntual y certera de JMiur. Este truco, por ejemplo, funciona de maravilla (lo acabo de implementar). Gracias JMiur

Responder
JMiur  

Gracias a ambos :$

Responder
KyubiT  

Al fin, despues de 45min. intentando, funcionó.

No se porqué costo tanto, quizás porque no habian comentarios, pero bueno, eso es un detalle. :)

Salu2

Responder
HaCk CrAcK  

Jmiur cual es el id ocea el elemento, para modificar el tamaño del rectangulo de donde comentan las personas?
con .comments funciona pero edita el formulario todo asi que quiero algo que sea mas preciso!

Responder
JMiur  

HaCk CrAcK:
En esta entrada de Randomness Blog está explicado perfectamente, aún no tuve tiempo de "copiarselo" y publicarlo pero he seguido sus instrucciones sin problemas.

Responder
JMiur  

esto es un test

Responder
GOCASE  

JMiur lomismo, he implementado esto y no me sale.

La plantilla me guarda bn pero no me queda el truco/efecto/añadidura o como se llame?

q puedo estar haciendo mal ??

ya sabes en q blog mirar jeje

Mil gracias de antemano

Responder
Proyectos Teocraticos  

hola mi nombre es Chrstian que me ayudaran mire cuando comentra ya por defecto en fondo de color de los comentarios es Verde -- Espantoso !!

Desearía cambiar el fondo de todos los comentarios.

Michas gracias !!

Responder
JMiur  

Tendría que ver tu blog ppara responder. Tu perfil es inacesible.

Responder
Proyectos Teocraticos  

bueno mira este es mi blog: http://christianbsastj.blogspot.com/

y como te avia dicho necesitaba cambiar el color de fondo por que era horrible _ Verde oscuro _ bueno he logrado solucionar el problema.

Como?

Gracias a mi navegador favorito Firefox y sus extenciones hay una de ellas que lo que hace es decirte el color de que esta utilizando en la web.

Bueno encontre el codigo de color del fondo y los busque en la plantilla y lo cambiar por otro color mas atractivo. - Muy Facil -

---> Espero que esto les sirva cuando desean cambiar el color de alguna parte de sus blog <----

PRegunta !!

En mi blog desea que para comentar este incrustado así como este.
Le pongo esa opcion en Blogger pero no aparace, asi por ahora me estoy aguantando que los que desean comentar lo este haciendo desde otra ventanita que sale de blogger.
Aver si me ayudas !!

En caso que no me entiendas mira y comparar lo que deseo.

Este es mi blog y fijate a la hora de comentar:

http://christianbsastj.blogspot.com/2008/02/comentar-no-cuesta-nada.html

Este es la forma en que deseo que este a la hora de comentar los usuarios:

http://vibrant-blogger-deluxe.blogspot.com/2009/04/lorem-ipsum.html

-----------------------------------------------------------

Bueno muchas gracias por tu aporte hace unos dias que me enganchado con tu blog y esta muy bueno felicitaciones y si asi !!


Saludos desde Bueno Aires.

C.C.S

---

Responder
JMiur  

Fiájte en esta entrada. No sólo debe estar marcada la opción sino tener el código adecuado en la plantilla. Es algo que no puede apreciarse online, sólo se ve en la plantilla.

Responder
Valsapena  

Hola.

He estado aplicando la numeracion de comentarios, colores, etc.. y al parecer iba todo bien... pero, doy cuenta que en IE7, no me deja escribir el comentario... y a postre me desplaza la sidebar hacia abajo...
En los demas navegadores todo perfecto incluido Ie8.
He estado mirando pero ni idea donde esta el error.

Este es el post :

http://amor-de-ser.blogspot.com/2009/12/prueba-de-comentarios.html

Muchas gracias de antemano.

Un abrazo.

Responder
JMiur  

Valsapena:
Por lo que veo, debe haber algún error en la plantilla, alguna etiqueta que se cierra antes de tiempo o que queda mla abierta en esa parte de los comentarios porque el código fuente que se lee en IE7 es muy raro. Otros navegadores, tal vez ignoran el error y por eso lo ves bien pero, hay qe corregirlo.
No es algo que pueda verse online, necesitaría ver la plantilla o esa parte de la plantilla para ver si puedo encontrar el problema; suele ser una cosa simple de arreglar pero a veces es difícil de descubrir.

Responder
Valsapena  

ok, te mando ahora la plantilla por correo.

Muchisimas gracias.

Un abrazo.

:)

Responder
JMiur  

Recién lo acabo de recibir. Déjamelo ver y te contesto.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR