Destacar comentarios de autor en Blogger

Siguiendo con la personalización de la nueva plantilla implementada en este blog de ayuda, voy a contar un detalle, que sirve para las plantillas de terceros o un poco antiguas, el destacar los comentarios de autor con una imagen al costado y como se puede personalizar a nuestro gusto.

Para hacer una idea una vez cambiada esta plantilla, y luego de agregar los comentarios anidados, los comentarios me quedaron asi:

Pueden ver que al lado del comentario del autor no se ve nada, vamos a editar un poco para que pueda quedar mas a nuestro gusto.

Como ven yo comento como Peyo, ahora para agregar un distintivo voy a edicion HTML de mi plantilla y antes de ]]></b:skin> agrego lo siguiente:

.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==);

}

Una Vez agregado los comentarios ahora quedan con un pequeño distintivo al lado de mis comentarios, una especie de lápiz:

Sin embargo si quieren otra imagen como la siguiente que agregue en mi blog de lucha libre, yo le agregue el logo de la lucha libre como se ve a continuación:

Deben cambiar el código que esta entre paréntesis, para que se hagan una idea lo que esta marcado en rojo a continuación, por la url de la imagen de dimensiones de 16×16, 17×17 o 18×18 ;

.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==);

}

Es un truco, que no toma mas de dos minutos implementar, y es mas que todo agregar detalles a la personalización de nuestro espacio personal.

¿Tienes alguna Duda?, o necesitas Ayudas no dudes en Comentar

1 Comment on Destacar comentarios de autor en Blogger

  1. Hola amigos de Como Ser Blogger! He estado intentando aplicar este CSS pero no logro conseguirlo.

Leave a comment

Your email address will not be published.


*


Follow

Get every new post delivered to your Inbox

Join other followers