martes, 24 de enero de 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 ésto (aunque no verifiqué en todas).





Blogger agrega CSS en las plantillas para lograrlo y es éste:


.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 no afecta a la carga del blog, ya que menos imágenes es igual a un blog más ligero, en términos de rendimiento.



El nuevo sistema de comentarios ya están pensados en ésto, 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 hay comentarios:

Publicar un comentario