Hay mucha gente que tenía modificados los comentarios viejos y ahora, dado a los nuevos comentarios, no posee esos estilos.

Para ver cómo modificarlos mediante CSS entra aquí.

Hoy vamos a modificar el aspecto de un comentario del autor.

Para ello vamos a usar jQuery o Prototype(aunque este último parece que no funciona con el nuevo sistema, por lo que no es recomendable) para añadir una clase a los comentarios del autor.

La función es fácil: Blogger da a un elemento de clase “icon” la clase “blog-author” cuando el que comenta es el autor. Buscamos esa clase, y luego el comentario, para darle una clase llamada “author-comment”.

Sólo hay que copiar lo siguiente antes de vuestra etiqueta </head>. Aseguraos de que tenéis las librerías instaladas (instalar jQuery)

Para jQuery:

Edición: He cambiado el script porque antes sólo seleccionaba el último comentario del autor. Ahora funciona a la perfección, como podéis ver en el blog.


<script type="text/javascript">
$(".comment-block").find(".icon.blog-author").closest(".comment").addClass("author-comment");
</script>

Para Prototype:

Debería de funcionar (aunque no lo he probado, ya que uso jQuery). Me gustaría que si algún lector usa Prototype me comentara si funciona.


<script type="text/javascript">
$(".comment-block").childElements(".icon.blog-author").up(".comment").addClassName("author-comment");
</script>

Modificarlos:

Para modificarlos podéis usar las siguientes clases:Nota: Los signos “mayor que” son indipensables. Si no los usáis estaréis modificando los comentarios respuesta también.


.comment-thread .comment.author-comment > .comment-block{
/*El bloque donde está el comentario propiamente dicho*/
/*Fondo, bordes...*/
background:#eee;
border:1px solid #ccc;
border-radius:10px;
/*Fuente, color...*/
font-family:Ubuntu,sans-serif;
color:#2c2c2c;
}
.comment-thread .comment.author-comment > .avatar-image-container{
/*El bloque de la imagen del que comenta*/
padding:3px;
background:#f2f2f2;
border:1px solid #eee;
box-shadow:0 0 5px rgba(0,0,0,.5);
}
.comment-thread .comment.author-comment > .avatar-image-container img{
/*La imagen*/
}

9 pensamientos en “Modificar los comentarios del autor en los nuevos comentarios

  1. Imagen de Francmi08 el dijo:

    De cobardes nunca se ha escrito nada… a probar se ha dicho…lo único que pasa es que yo tengo las dos librerias: jQuery y Prototype, con un "arreglo" que pillé de Vagabundia si mal no recuerdo y hasta hoy me funcionan bien…veremos a partir de esta prueba lo que pasa…y lo que me gustaría saber a ciencia cierta es donde va situada la segunda parte con las clases: "modificarlos" y además si esto es lo mismo que pone "compartidisimo" ya que yo tengo sus estilos, y fue allí donde descubrí esta entrada.Gracias y espero tus respuestas.

    • Imagen de Emilio Cobos Álvarez el dijo:

      No se cuál es el truco que has usado para las dos librerías. Si es el modo "no conflict" de jQuery, funcionará si pegas debajo de <script>:

      "jQuery(function($){"

      y encima de </script> el cierre:

      "});".

      Las clases van con el resto del CSS, es decir, encima de </b:skin>.

      Y en cuanto si es lo mismo que compartidisimo, no tiene nada que ver. Con ese truco solo puedes cambiar el icono. De esta manera aprovechamos el icono para poder modificar todo el comentario.

    • Imagen de Francmi08 el dijo:

      Bueno, después de muuuuucho probar, no me acepta tus estilos, no se que es lo que haré mal y de verdad que estoy medio loco, ya que me gusta más que el de "compartidisimo" sin ánimo de menospreciar ninguno de los dos estilos.Creo que he seguido tus pasos al pie de la letra pero no lo consigo y de momento me quedo con el otro estilo, en espera de tu opinión si es que me puedes ayudar paso a paso (por ver si lo hago bien).

  2. Imagen de Francmi08 el dijo:

    Este es el que tengo:
    ""script type='text/javascript'>
    jQuery.noConflict();
    jQuery(function (){
    jQuery(".slide_likebox").hover(function(){
    jQuery(".slide_likebox").stop(true, false).animate({right:"0"},"medium");
    },function(){
    jQuery(".slide_likebox").stop(true, false).animate({right:"-250"},"medium");
    },500);
    return false;
    });
    </script""(Faltan los simbolos del principio y del final del script).
    Y como te comento me funciona bien por lo menos no veo conflictos apreciables a la vista…en cuanto a lo otro deduzco que para aplicar este tengo que quitar las clases de "compartidisimo" y poner las tuyas, ¿no?.O puede funcionar todo junto??? Si me puedes responder ya que estoy en ello…Gracias por tu atención.

    • Imagen de Emilio Cobos Álvarez el dijo:

      Sí, tienes el modo no conflict de jQuery.

      El problema es que con esta entrada modificas el comentario del autor, no el resto.

      Publicaría una entrada con todo el código, pero ahora no me da tiempo, así que te dejo un link con lo que tienes que copiar encima de </b:skin>:

      Aquí

    • Imagen de Francmi08 el dijo:

      Bueno, llevo ya tiempo con todo aplicado y debido al cambio que he hecho en la plantilla, me gustaría poder modificar los textos de "autor, fecha, responder y suprimir"…..sería posible con los datos que me das en el enlace del comentario anterior o tengo que añadir los formatos para el texto???

    • Imagen de Emilio Cobos Álvarez el dijo:

      Se me ocurre que para modificar el texto del botón de responder podrías hacer esto:
      jQuery('.comment-actions.secondary-text > a').html('Aquí va tu texto')

      En cuanto al de suprimir, sinceramente no le veo lógica cambiarlo, ya que sólo lo verías tú en todos los comentario ( o alguien que haya hecho un comentario, que sólo lo vería en ese comentario ). En todo caso sería:

      jQuery('.comment-actions.secondary-text > span > a').html('Aquí va tu texto')

      No sé si es a lo que te referías. Si te referías a sólo cambiar el estilo (que lo veo mucho más coherente), sería, pegando esto encima de :

      /*Botón responder*/
      .comment .comment-actions.secondary-text > a{
      /*Aquí tus estilos*/
      }
      /*Botón suprimir*/
      .comment .comment-actions.secondary-text > span > a{
      }
      /*Autor*/
      .comment .comment-header cite.user{
      }
      /*Fecha*/
      .comment .comment-header span.datetime.secondary-text{
      }

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Puedes usar las siguientes etiquetas y atributos HTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre data-language=""> <ul> <ol> <li>
Para poner código usa <pre data-language="[lenguaje]"><code>[código]</code></pre>, y no olvides escapar el HTMl.