24 enero 2012

Destacar el Comentario del Autor del Blog fácilmente y con CSS

El nuevo sistema de comentarios nos permite personalizar los comentarios muy fácilmente, y una de las características interesantes es que podemos destacar el comentario del autor, de una manera sumamente sencilla, de hecho, en las nuevas plantillas del diseñador de plantillas ya funciona esto (aunque no verifiqué en todas).


Blogger, ya agrega las reglas de estilo para lograrlo y son estas:
.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);

Utiliza una imagen en base64, para evitar hacer la petición de HTTP, traducido en cristiano, quiere decir que no se aloja ninguna imagen y se supone que ayudaría a la carga del blog, ya que menos imágenes es igual a un blog más ligero, en términos de rendimiento.

Los comentarios ya están preparados para esto, es por eso que en las plantillas personalizadas, queda un "espacio grande"  después del nombre del autor del blog en los comentarios, si lo habrás notado.

El icono que aparecerá será el de un lapicito en un circulito, después del nombre del autor. De ese modo fácilmente un lector o usuario sabrá que es un comentario del autor del blog, sin que se vea muy parchado...

Pero, siendo claros, ¿cómo hacer funcionar esto?


Simplemente pega el código que mencionaba al principio, yendo a  Plantilla > Personalizar > Avanzado > Añadir CSS, o bien, en la edición de HTML de la plantilla antes de ]]></b:skin> y guardas los cambios, verificando en vista previa antes, si es que lo haces desde la edición de HTML de la plantilla.

El icono que se agregará será el que puedes ver en la siguiente imagen y ahora mismo en mi blog:


Próximamente voy a crear algunos estilos interesantes para que puedan personalizar los comentarios, que ahora si dan ganas de ponerse a trabajar en esto ;)

Por otro lado, espero que Blogger pronto arregle el problema de "dirigirte directamente a los comentarios" cuando se hace click en el enlace del título del post, en algunos navegadores como Firefox; esperemos...

No olvides suscribirte, para recibir todas mis actualizaciones, directamente a tu email.

Ingresa tu correo electrónico:

Recuerda confirmar tu suscripción, haciendo click en el enlace que recibirás por email.

15 comentarios:

  1. yo elimine ese icono por que no se veia bien en mi plantilla

    ResponderSuprimir
    Respuestas
    1. Ese ícono hace que se identifique el comentario del autor, y no tienes que alojar ninguna imagen. Si no te gusta, lo puedes cambiar por otro a tu gusto :)

      Suprimir
  2. Esto es muy bueno,ya lo agregue a mi blog

    ResponderSuprimir
    Respuestas
    1. Es muy sencillo y es parte de lo que Blogger tiene definido en los estilos para los comentarios anidados :)

      Suprimir
  3. Hombre, a mí me parece una buena idea, pero el problema es que no puedes modificar el resto del comentario.
    Para eso ya habría que usar javascript, como ya te dije en otro comentario.

    ResponderSuprimir
    Respuestas
    1. Es idea de Blogger, los comentarios anidados traen los estilos básicos para esto:

      .comments .comments-content .icon.blog-author{display:inline-block;height:18px;margin:0 0 -4px 6px;width:18px}

      Sólo que no agrega la imagen, y esta de base64 que puse, es la que usa la plantilla sencillo de Blogger.

      Bueno, pues dependerá de cómo lo quieras personalizar, puedes modificar el icono y hacer maravillas usando esa declaración del CSS, sin agregar javascript.

      En mi caso destaco las respuestas de los comentarios, poner un fondo diferente por ejemplo para el autor (para mi) creo se vería muy parchado.

      Luego me voy a poner a jugar con eso y ya que tenga algo interesante lo publico ;)

      Saludos Emilio ;)

      Suprimir
    2. Sí, pero no es necesario ser tan exhuberante cambiando el fondo. Yo, por ejempli sólo he añadido una pequeña cinta a base de CSS (por cierto, con un generador muy bueno que aquí publicitaste ;) ) con la palabra 'autor'.

      De todas maneras queda muy bien en tu blog la imagen, tal vez la pruebe :)

      Suprimir
  4. Ya lo agregue a mi blog! Gracias.

    Me podrías decir como hago para que mis comentarios también estén separados con una linea así como los tienes en tu blog? De antemano gracias por tu ayuda.

    ResponderSuprimir
    Respuestas
    1. Hola Obed,

      Echá un vistazo al siguiente post, al final, menciono cómo aplicar los estilos que uso ahora en el blog:

      http://www.compartidisimo.com/2012/01/problemas-con-los-estilos-de-los.html

      Cualquier cosa me avisas :)

      Suprimir
    2. Gracias Karla, ya vi esa entrada y ahora ya tengo una idea para personalizar los comentarios.

      Suprimir
    3. hola karla me gustaria saber si podrias ayudarme en el mio desaparecio el lapiz

      Suprimir
    4. ¿y ya lo tenías?, verifica si borraste el código, otra razón puede ser que editando algo, hayas borrado código CSS de más.

      Recomiendo ámpliamente que agreges CSS personalizado desde añadir CSS, en el Diseñador de plantilla, son menores las probabilidades de que vayas a borrar algo o pegar algo mal.

      Suprimir
  5. Muchísimas gracias, voy ha ponerlo en mi blog... k por cierto estoy utilizando la plantilla de versatile... muy buena plantilla, la mejor k he encontrado hasta ahora.
    Es muy personalizable y además el carrousel es super fácil de manejar...
    Yo con los carrouseles no me llevo muy bien.... siempre me falla algo, con tu plantilla versatile todo es más fácil, y esto también me ha encantado... voy corriendo a ponerlo en mi blog!
    Te dejo el link de mi blog, por si kieres visitarlo y ver como he modificado yo la plantilla versatile... toda moradita y lila... MIS COLORES PREFERIDOS!!
    http://loslibrosdelaury2998.blogspot.com

    ResponderSuprimir
    Respuestas
    1. Perfecto Laury, me da mucho gusto que la plantilla se haya adaptado a tus gustos y necesidades :)

      Muy padre tu blog :), noté que no has configurado el gadget de entradas populares (la galería que está abajo) aparece el titulo del post a un lado. Para que aparezca el titulo en un tooltip, (como en la demo) sólo abre las opciones de configuración del gadget, y edítalo para que sólo muestre la miniatura.

      Tienes que estar atenta porque ahora mismo estoy trabajando en una iniciativa que ayudaría a impulsar y reconocer a los blogs de distintas temáticas...

      Cualquier cosa me dices ;)

      Suprimir