Destacar comentarios de los autores de cada entrada en Blogger | Oloblogger Esto es algo antiguo y que de hecho ya había publicado anteriormente . Lo que ocurre es que con tantos cambios automáticos por parte de Blog...

5 de julio de 2011

Destacar comentarios de los autores de cada entrada en Blogger

Esto es algo antiguo y que de hecho ya había publicado anteriormente. Lo que ocurre es que con tantos cambios automáticos por parte de Blogger en las plantillas, aquel primer post ha quedado desfasado y lo explicado allí no sirve actualmente.

El cambio es muy sencillo y nos permite dar un estilo distinto a los comentarios del autor de un post. Si hay varios editores, en cada entrada sólo se destacarán aquellos que correspondan al autor de esa entrada concreta.

Tenemos que ir a Diseño ► Edición HTML y con Expandir plantillas de artilugios seleccionado, buscar el siguiente trozo:

...
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
...

Ese es el bucle que va imprimiendo los comentarios de cada post y un poco más abajo de esas líneas, encontraremos la variable que contiene todos los comentarios. Es <data:comment.body/>. Vamos a suponer que todos la encontrais entre etiquetas de párrafo (<p>). Si es así, añadimos una condición para comprobar cuando el autor del comentario y el del post coinciden, en cuyo caso aplicamos un estilo diferente. En verde lo que encontraremos. Lo demás hay que añadirlo.

<b:if cond='data:comment.author != data:post.author'>
<p>
<data:comment.body/>
</p>
<b:else/>
<p class='estiloautor'>
<data:comment.body/>
</p>
</b:if>

Ahora ya sólo resta crear en nuestra parte CSS la clase estiloautor y darle formato a discreción. El ejemplo más fácil sería añadir un color de fondo distinto, pero el resto de posibilidades que son infinitas, lo dejo a vuestro buen gusto y criterio.

.estiloautor {
background:#ffffff;
padding:10px;
}

Si por casualidad vuestra plantilla no utiliza las etiquetas de párrafo para los comentarios, entonces tendréis que sustituir todas las p por div.

Ejemplo en Oldbook:

¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

35 comentarios :

  1. Ahora mismo voy a probarlo. Gracias.

    ResponderEliminar
  2. Vaya, me temo que no funciona, al menos con mi plantilla (Filigrana con algunas modificaciones que he visto por aquí).

    ResponderEliminar
  3. Mmmm XD a mi no me funciono, creo que mi codigo no trae la segunda parte desde el b.if... XD bue, que se le va a hacer... gracias Oloman!

    ResponderEliminar
  4. Soy partidario de esta modificación, ya que es muy útil ver los comentarios/contestaciones del autor del post a las dudas/sugerencias de los visitantes.

    ResponderEliminar
  5. Ya lo he aplicado aunque me sigue abriendo por defecto la ventana de comentarios que lleva por defecto la plantilla.

    ResponderEliminar
  6. Hola Oloman que tal? espero que muy bien demasiado tiempo sin saver del mundo del blogger :S Mucho Tiempo sin solicitar tu ayurda. Bueno junto con saludarle me gustaria solicitar tu ayuda, quisiera que entraras aqui http://borrador-j4.blogspot.com/ y vieras a tu isquierda donde un elemento dice Artistas y Estilos, tengos dos dudas que lo he intentado per dan fallos :S no entiendo

    1.-Como podria suvir los titulos "Artistas" y "Estilos" haci arriva ya que si os fijais esta bajo y no al borde.

    2.-Como darle espacio entre "Artistas" y "Estilos" ya que estan juntos y me gustaria darle una leve separacion

    y como NOTA: Si miraras "Artistas" no tiene "estilo" en cambio "Estilos" tiene estilo :S'

    Bueno de antemano te lo agradeceria mucho
    Muchas Gracias, esperando tu respuesta
    Jonathan.

    ResponderEliminar
  7. Malapata, Deus Ex Machina, lo probé con éxito en una plantilla clásica y en una del nuevo diseñador y en ambos casos encontré el mismo código.

    Por si os pasa lo mismo a los dos, Deux dice que no encuentra el segundo trozo, pero es que precisamente ese trozo es el que hay que añadir. El primero es la referencia para encontrar <p>
    <data:comment.body/>
    </p> y una vez encontrado (lo de verde), se añade todo lo demás, una parte antes y otra detrás.

    ResponderEliminar
  8. Raúl Montero dependiendo del tipo de blog, puede ser bastante práctico. Por ejemplo, en mi caso lo sería pero es que estoy muy perezoso últimamente ;)

    Hemithecomix ¿ventana? ¿qué ventana? Actualmente no tienes el sistema de ventana para añadir comentarios. Yo veo el formulario incrustado en la entrada.

    ResponderEliminar
  9. Hola Oloman.

    Me gustó la plantilla Oldbook y lo instalé en el blog de la poesía de mi hermana, ya com este truco pero se encontró con algunos problemas al tratar de modificar el gadget y hacer clic en el archivo y el cuadro de búsqueda no funcionava, o los avatares en los comentarios.
    Después de buscar una solución, he descubierto que una única línea que falta en el inicio del código de la plantilla:
    <head>
    <b:include data='blog' name='all-head-content'/>

    Espero que le ayudará si tiene el mismo problema.

    Gracias por OldBook e por estes trucos. ;)

    Usted puede ver cómo se ve en Poesias do Sol Posto

    ResponderEliminar
  10. Gracias Oloman! Ya lo aregle, esto me pasa por no leer bien... XD

    ResponderEliminar
  11. Eligor!, ese bloque de pestañas yo lo veo bien. Los títulos están separados y arriba del contenedor. Necesitaría que me enviaras una captura y que sobre ella marcaras lo que quieres hacer. De todas formas, he observado que tabviewnav tiene un ancho mayor que su contenedor (tabviewcont). A ver si va a ser eso y que en distintos navegadores se ve de distinta manera.

    ResponderEliminar
  12. OCP ¡muchísimas gracias! No me había dado cuenta de eso. Posiblemente en alguna modificación me cargué esa línea. Arreglado queda.
    Y ya que estamos, ha sido muy buena idea lo de incorporar una barra lateral desplegable ;)

    Deus Ex Machina, no problemo :)

    ResponderEliminar
  13. Hola, iba a seguir tus pasos pero tengo un problema. Con el nuevo diseño de el escritorio de blogger no encuentro en "Diseño" la edición de HTML de mi blog. Ni idea de dónde se ha metido. ¿Dónde está?
    Gracias

    ResponderEliminar
  14. Lucía, de momento todavía puedes usar el antiguo escritorio desde Blogger "normal" (no Draft) y desde ahí accedes como siempre, pero si quieres usar el nuevo escritorio, aquí tienes cómo encontrar el enlace: http://goo.gl/pXfcc

    ResponderEliminar
  15. Muchas gracias, ya lo he hecho y mis comentarios quedan resaltados :)

    ResponderEliminar
  16. Buenas oloman, estaba revisando tus artículos antiguos y este siempre quise ponerlo en práctica pero no encontraba el momento.

    Va como la seda, pero me puse a pensar...

    En vez de modificar el color de fondo de los comentarios del autor ¿hay alguna manera de colocar una imagen de fondo?

    Si lo que planteo es una estupidez, disculpame.

    www.elultimoduelo.com

    ResponderEliminar
  17. Oloman la he cagado jajajaja

    No sé que he hecho pero necesito urgentemente tu ayuda. Sé que estás de vacaciones pero bueno si pudieras echarme una mano con mi problema te lo agradecería.

    Mis comentarios y cuando digo "mis" me refiero sólo a los míos (a los del autor del blog) salen duplicados. Uno sale con estilo CSS que cree y el otro sale normal. No sé como hacer que solo salga el de estilo CSS y que no se duplique.

    Para que te hagas una idea de cúal es mi problema fijate en los comentarios de esta entrada y verás a que me refiero:

    http://www.elultimoduelo.com/2011/07/editorial-la-desesperada.html#comments

    ResponderEliminar
  18. William, siento el retraso, pero sí, ando un poco con vacaciones de blog ;)

    No sé lo que habrás insertado de más, pero la clave está en el segundo código de esta entrada. Repasa esa parte porque seguro que dentro de la parte del condicional que muestra el estilo del autor del blog, hay un par de <data:comment.body/>

    En total debes tener tres y sólo debería haber dos. Por eso te lo duplica. Aprovecha y quita también todo lo que tiene "alrededor" ese data:comment.body de más.

    No puedo ser más explícito porque esa parte del código no es visible desde fuera.

    Copia todo el artilugio en un bloc de notas antes de hacer más cambios por si tienes que volver a la versión actual. Aunque sea duplicada, siempre será mejor que otro tipo de desaguisado ;)

    ResponderEliminar
  19. Anónimo9/8/11, 5:25

    Así está mi código.

    http://img580.imageshack.us/img580/5165/problemacodigo.png

    He borrado uno de los pero no ha pasado nada. Siguen duplicándose. Si necesitas que haga una captura de otra parte del código dímelo, en cualquier caso, no me importaría date privilegios de administrador si fuera necesario olo.

    Gracias de antemano.

    ResponderEliminar
  20. Willian lo mejor es que primero intentes arreglarlo tú. En un principio, me parece que lo que sobra del trozo que me mandaste es el primer párrafo, el que incluye el data:comment.body y la imagen con clase firma.

    Una vez eliminado, el otro data:comment.body es sobre el que hay que actuar. Allí inserta las líneas que en este post se indican.

    ResponderEliminar
  21. Empiezo a estar un poquillo desesperado. Hice los cambios que me sugeriste. Si bien antes los comentarios que se duplicaban eran los del autor del blog. Ahora estos no se duplican, ahora los que se duplican son los de los usuarios.

    ¿Qué puedo hacer oloman? Algo se me escapa y no sé que es.

    ResponderEliminar
  22. Necesitaría el código completo de la parte de los comentarios, William. En un documento editable, por favor, no en una imagen.

    ResponderEliminar
  23. Te lo he subido a megaupload si prefieres que te la mande a un correo en concreto dímelo.

    http://www.megaupload.com/?d=NPY7462I

    Muchas gracias Olo, sé que estoy abusando de tu tiempo pero mi blog es el periódico de una comunidad de mas de 50.000 usuarios y estoy desesperado por corregir ese error.

    Valoro mucho tu tiempo y tu dedicación.

    ResponderEliminar
  24. Willian, actualmente tienes esto y ahí hay que añadir un data:comment.body que te he marcado en negrita:

    <b:if cond='data:comment.author != data:post.author'>
    <p>
    <data:comment.body/>
    </p>
    <b:else/>
    <p class='estiloautor'>
    <data:comment.body/>
    </p>
    </b:if>

    <dd class='comment-body'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'/>
    <b:else/>
    <p><data:comment.body/></p>
    </b:if>
    </dd></dt>

    Bien. Ahora CORTAS todo el primer trozo (antes del salto de línea) y lo pegas en SUSTITUCIÓN de la antepenúltima línea. El resultado será este:

    <dd class='comment-body'>
    <b:if cond='data:comment.isDeleted'>
    <span class='deleted-comment'/>
    <b:else/>
    <b:if cond='data:comment.author != data:post.author'>
    <p>
    <data:comment.body/>
    </p>
    <b:else/>
    <p class='estiloautor'>
    <data:comment.body/>
    </p>
    </b:if>
    </b:if>
    </dd></dt>

    No puedo probarlo porque la plantilla la necesito en .xml y me la has enviado en .txt, pero creo que ya te funcionará.

    ResponderEliminar
  25. Diossssssssssss funciona! Me salvaste la vida olo! jajaja No sabes hasta que punto te lo agradezco compañero. Era un problema que no era capaz de resolver y me tenía abrumado.

    Gracias de corazón olo.

    ResponderEliminar
  26. oloman
    tu blog es estupendo,
    yo llegue hasta donde dices "Ahora ya sólo resta crear en nuestra parte CSS la clase estiloautor y darle formato a discreción", no se como seguir, no se que es CSS o donde esta, mi intencion era simplemente poner un color de fondo o que el texto del autor sea de un color diferente, ¿puedes ayudarme?
    gracias de antemano

    ResponderEliminar
  27. Javier Zavaleta, la parte CSS es la que hay entre las dos etiquetas SKIN de la plantilla. El HTML es lo que va formando lo que se ve en una página y el CSS es lo que le da estilo (color, tamaño, posición, fondo...) a los elementos creados con el HTML.

    Lo que tienes que hacer es insertar antes de ese cierre (]]></b:skin>) el último trozo de código que en la entrada se cita. Luego, entre los corchetes tienes que poner las propiedades que a tí en concreto te interesan.

    En el ejemplo, las propiedades que se ven sólo hacen que se vea un fondo blanco (#ffffff) y
    un pequeño margen en todas las direcciones (padding).

    ResponderEliminar
  28. Hola, acabamos de hacer todo como lo indicaste, pero no sabemos que hemos tocado y ahora no funciona el link para los comentarios. Al darle click sobre el "Link" que dirige a ellos no sucede nada...¡Ayuda, por favor! Y Gracias.

    ResponderEliminar
  29. Marie y Vallery, en un principio no hay nada en esta parte de código que tenga que ver con los comentarios, pero es que además, desde aquí yo no puedo ver esa parte.

    Echad un vistazo a esto y comprobad que es lo que os falta: Enlace a comentarios

    ResponderEliminar
  30. No me funciona. Hago todo lo que indicas, pero los comentarios de administrador siguen sin resaltarse. ¿Alguna idea?

    ResponderEliminar
    Respuestas
    1. Esto ya no funciona desde que implantaron el nuevo sistema de comentarios, pero alguna que otra cosa -menos sofisticada- sí que se puede hacer.

      Eliminar
  31. ¿Y si tan solo quiero añadir entre nombre y permalink -del autor de la entrada, claro- este iconito?
    Es que según como lo pones, el lápiz aparece en el comentario. Luego he estado probando un buen rato y no encuentro la forma de hacerlo como quiero xD

    ResponderEliminar
    Respuestas
    1. Lo arreglé poniendo esto:

      b:if cond='data:comment.author != data:post.author'
      b:else/
      img src='???'/
      /b:if


      En el lugar que deseaba ver ese maldito iconito!!!
      (Añádense las estiquetuelas <> donde precise)

      Eliminar
  32. NEVERMIND LO CONSEGUÍ LO CONSEGUIIIIIIIIIIIIIIIIIIIIIII
    Todo grasias a usté :'D
    Gracias por su ayuda en todo! Por fin tengo el diseño como quiero!

    ResponderEliminar