5 de agosto de 2013

Cómo destacar los comentarios del autor

Categorías:

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 previaantes, 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:


Comparte el Post en las redes sociales

Posts relacionados

2 comentarios :

  1. ¿Como puedo modificar esa imagen por una mas grande? Por ejemplo: una por 24x120 pixeles.

    Te lo agradeceria. Un saludo.-

    ResponderEliminar