Como había trasteado de más con esto de los comentarios, borré accidentalmente el código que lo hace visible y se me olvidó el tema, pero recientemente lo he vuelto a poner y de paso lo he personalizado un poco. Ahora el lapicero es el mío ;)
En los comentarios aparece ahora a la derecha del nombre del comentarista, un espacio destinado a este icono, pero sólo se verá si en los estilos tenemos la clase adecuada con un gráfico de fondo como propiedad. Estamos hablando de esta clase y estas propiedades:
.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==);
}
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}
Eso tan extraño que aparece en la url de la supuesta imagen de fondo, no es más que un código llamado Base64. Como con todos los sistemas de codificación, lo que pretende Base64 es transformar los datos originales en otros distintos mediante un algoritmo, en este caso de sustitución.
Aunque parezca que lo que intenta esta codificación es hacernos ininteligibles esos datos, realmente lo que pretende es utilizar un número menor de caracteres de una manera normalizada. Nótese que es característico de este código los signos = con los que terminan sus secuencias (más información sobre este sistema en el anterior enlace).
La mayor ventaja es que así se reducen el número de peticiones a servicios externos, ya que la imagen está en la página y no hay que solicitarla a un almacén externo. Por contra hace que el peso de la hoja de estilo sea algo mayor, pero esto es siempre mejor que la opción de que sea la parte HTML la que cargue con ese peso. Recordar que las hojas de estilo suelen ser cacheadas por completo por los navegadores. Esto último es precisamente lo que hace que el aumento de tamaño no penalice demasiado el rendimiento de la carga de la página y que esta técnica sea recomendada por muchos especialistas.
Como habéis visto, para poner una imagen en formato Base64, la sintaxis es esta:
data:[<mediatype>][;base64],>datos>
mediatype indica al navegador el tipo y formato del fichero que se quiere traducir y los que más se utilizan y nos interesan en este caso son image/gif, image/jpeg e image/png, de entre los cuales escogeremos el que coincida con el tipo que tenga la imagen original. Como dato adicional, comentar que si no se indica el tipo, el navegador asume text/plain. Como antes, el que quiera profundizar en el tema puede consultar en Libros Web.
Volviendo a lo del icono personalizado, nada impide utilizar una imagen a la manera tradicional y el resultado sería el mismo:
.comments .comments-content .icon.blog-author {
background-repeat: no-repeat;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMBg0AZR4q_P5cqFFyD_WCu5qYeG0vHsZGEXxKo7YAA887Hc8x7mxq8kcZ9adOMuL9ge4H5vimKaawjk0j-vyCCUQ5fOpCSlvK3jx9QiTI_QW_yVtAvzoiBEc3pQwamdO4NPhrIbOGZeI/s1600/icono.png);}
background-repeat: no-repeat;
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiMBg0AZR4q_P5cqFFyD_WCu5qYeG0vHsZGEXxKo7YAA887Hc8x7mxq8kcZ9adOMuL9ge4H5vimKaawjk0j-vyCCUQ5fOpCSlvK3jx9QiTI_QW_yVtAvzoiBEc3pQwamdO4NPhrIbOGZeI/s1600/icono.png);}
Creo que ya está medianamente claro, que si queremos cambiar ese lapicero por defecto por otra imagen, sólo tendremos que cambiar el código Base64 que inserta Blogger por la dirección de la imagen que queremos poner nosotros. Precaución con el tamaño, ya que el de ese icono es de sólo 18x18 px.
Una vez que sabemos qué es eso del Base64, también podemos sustituir el código original por el de cualquier otra imagen codificada con esa misma técnica. Por ejemplo, en WUtils podéis encontrar un codificador/decodificador especialmente preparado para convertir imágenes.
Otra cosa. Si por casualidad no os sale el icono quizás es porque os falte el código que puse al principio u esta otra parte que se ve a continuación. Esta es la que da tamaño al bloque destinado para el icono. Si no se reserva espacio para el dibujo, es imposible que se muestre el fondo, que es cómo se inserta ese icono con CSS:
.icon.blog-author{display:inline-block;height:18px;margin:0 0 -4px 6px;width:18px;}
Es posible que alguno quiera destacar más los propios comentarios resaltando todo el bloque y no sólo añadiendo una pequeña imagen, pero lo único que se me ocurre por ahora sería introducir un condicional en el script de comentarios para que cuando el autor coincida con cierta cadena de caracteres (la del propietario del blog), el estilo cambie. Pero sinceramente, hasta que no pase un tiempo prefiero no tocar esa parte con los problemas que ha dado.
Pero podemos hacer una cosita más con CSS que siempre es mucho más fácil de cambiar y que no afecta tanto en caso de futuros cambios. Sería destacar nuestro propio nick jugando con las propiedades que le podemos asignar a un texto. Para eso echamos mano de la clase .post-author que Blogger utiliza de manera exclusiva para nosotros, los autotes. Por ejemplo:
.comments .comments-content .blog-author a {font-size:120%;font-weight:bold;padding:2px;background:#666666;color:#ffffff;}
Así que jugando con el icono y con tamaños, colores, bordes, sombras y algunas propiedades más para nuestro sobrenombre, podemos conseguir un estilo destacado para nuestros propios comentarios, de una manera sencilla.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Increíble lo he colocado y se ve genial. Gracias
ResponderEliminarIncreíble explicación Oloman :D, entendí muy bien lo de la Base64, es muy útil!
ResponderEliminarUna pregunta., que venga en Base64 no hace más lenta la página?
ResponderEliminarPorq usan esa codificación? No tarda (por asi decirlo) más el navegador en interpretar los datos de la página?
Existe alguna norma estandar que requiera esta BASE64 para las imagenes?
Es posible, pero supongo que depende del tipo de dato que metas ahí. Si es una imagen compleja o más grande que las comentadas en el post, seguramente los inconvenientes superen a la ventajas. En este enlace de Wikipedia puedes ver una lista de unos y otras.
EliminarLo cierto es que no tengo criterio suficiente como para indicarte a ciencia cierta, pero por ejemplo, yo tengo otra página en la que el hosting me limita las peticiones y tengo problemas de acceso algunos días. Si hubiera conocido esto antes y teniendo en cuenta que la web es bastante rápida porque no es compleja, seguramente hubiera colocado las pocas imágenes que tengo con este sistema, ya que eso y los scripts que contiene son los que me hacen elevar el nivel de dichas solicitudes.
Me salté la última pregunta.
EliminarNo creo que haya ninguna norma que obligue a usar esa codificación pero por contra, tampoco me suena que esté desaconsejada.
Hola!!!! Me gustaría ponerle a mi otro blog buscandolabuenasuerte.blogspot.com.ar el estilo de comentarios que tenés acá...un marco redondeado con el avatar afuera...como logro eso? ya le puse uno pero sólo marca lo míos y no tiene nada de estilo...me ayudás??? podés ver a lo que me refiero en http://buscandolabuenasuerte.blogspot.com.ar/2012/01/se-armo-tole-tole-en-la-chacra-de.html?showComment=1336737754571#c7070614888212681909 gracias!!!!
ResponderEliminarHola. Lo del avatar redondeado lo tienes explicado en este enlace
Eliminarola un fovor como coloco esto en la plantilla
Eliminar"◄25C4"
q es lo q usas para tus comentarios
content:"\25C4"
Eliminar...Nada, que no me sale :'D
ResponderEliminarHe puesto todo lo que dices (también lo que da tamaño al bloque -que por cierto, he mirado en el código de blogs donde sale el iconito y eso no está-), hasta he probado si con una url normal iría, pero nada oye... ¿Qué puede ser?
Acabo de contestar otro comentario tuyo en el que también tienes problemas con un código CSS. Ambos son cosas muy sencillas por lo que sospecho que lo que ocurre es que no lo insertas dónde debes. Otra cosa es que con Vista Previa no verás este tipo de cambios, ya que necesitas grabar y acceder a un post (no a la página Home) para poder hacerlo.
EliminarQue va, que va, si para ver cambios en los comentarios guardo la plantilla y lo veo... ¡Y no me sale el lápiz, claro! Y el código lo he probado a insertar en varios sitios, de hecho como referencia miré el código fuente de este blog y un par más, para ver donde funcionaba, y nada nada... Ahora que lo pienso, ¿No sería que borré algo del código expandido? O de esa parte, almenos...
EliminarY vamos, ahora mismo tengo puesto el código tal y como dices, compruébalo si quieres (...ojalá fuera un error tonto mío de fácil solución xD)
Creo que ya se lo que pasa. Estas clases son las que maneja el nuevo sistema de comentarios anidados y tú tienes todavía el antiguo. En ese caso, para poder modificar los comentarios que tú escribas, el post que tienes que ver es este: Destacar los propios comentarios
Eliminar¡Oh! ¡No había visto tu respuesta!
EliminarAhora lo miro.
Sólo hay que suscribirse a las entradas que te interesen para no tener que estar atento ;)
EliminarNo, si lo había hecho xD
EliminarTan solo se me pasó.
hola oloman mira esta genial el tuto pero como la imagen q le puse es el tamaño de 10px x 30px lo que hice fue
ResponderEliminaragregarle estos valores
height: 12px;
width: 30px;
estaria mal hacer eso ??? por q si ago eso funciona al 100%
mi blog tiene el nombre de club-dhayzone
¿Cómo va a estar mal si te funciona? :) En cualquier caso sería redundante si no hiciera falta.
EliminarOloman, tengo una consulta. ¿Se pueden mostrar la cantidad de comentarios dentro de un post/entrada? Espero ansioso tu respuesta, y GRACIAS¡¡¡
ResponderEliminarMarcos
Se puede si los pones delante o detrás del contenido. En mitad del mismo no. Tendrías que colocar esto en el post-header o post-footer: <data:post.numComments/>
EliminarA la izquierda del título de este mismo post puedes ver el numerito.
Hola Oloman, solo decirte que gracias por tus ayudas...me ha quedado perfecto...mardepensamientosblog.blogspot.com por si quieres echarle un vistazo.un saludo ;-)
ResponderEliminarJejeje... Una estrellita. Buen detalle.
Eliminar