Títulos con imagen individualizada y otras personalizaciones para Blogger

Cómo poder personalizar los títulos de los artículos en blogger y todo el comentario del autor del blog así como los comentarios borrados.

Títulos con imagen individualizada y otras personalizaciones para Blogger

Por Kseso ✎ 12
Una imagen de Unsplash

Lo prometido es deuda. Así que toca compartir con los lectores de este blog y usuarios/sufridores de Blogger algunos detalles. Como por ejemplo incluir una imagen diferente en cada título de los artículos, o personalizar la caja del comentario realizado por el administrador del blog (todo su contenido, no sólo el nombre) o todo el comentario borrado.

Títulos de los artículos con imagen de fondo

Al acometer esta última remodelación del blog me planteé darle mayor relevancia al título del artículo. Y que la apariencia de cada título fuese diferente.

La idea era colocar una imagen en el título. Y que la imagen cambie de un artículo a otro para evitar la monotonía. Pero aquí viene una de las limitaciones de Blogger.

Blogger no incluye una manera de personalizar de forma independiente cada uno de los títulos de los posts. Vía Css puedes aplicar estilos. Pero estos estilos serán iguales para todos los títulos.

El editor de las entradas en el campo del título no permite más que texto plano. Así que olvídate de incluir cualquier marcado html. Incluidas imágenes. Toca ser un poco imaginativo.

Si no puedo ponérsela desde el mismo título usaremos una que ya esté en el cuerpo del artículo.

Captura del editor de entradas de Blogger
Captura del editor de entradas de Blogger

Para poder ver una imagen del post como background del título toca incluir en el código de la plantilla (opción "Plantilla --> Editar Html" ) un par de líneas de javascript. Preferiblemente al final y como sólo será necesario en los posts lo incluimos metido en un condicional:

Reconocimiento de autoría El siguiente código js es obra de Furoya. Gracias.

<b:if cond='data:blog.pageType == "item"'> <script type='text/javascript'> //<![CDATA[ document.querySelector('h1').style.backgroundImage = 'url(' + document.querySelector('.articulo-main img').src + ')'; document.querySelector('.articulo-main img.hide-img').remove(); //]]> </script> </b:if>

Explicación del Js

<b:if cond='data:blog.pageType == "item"'> Con esta línea (y su cierre </b:if>) le indicamos al Blogger que sólo cargue el js en los items que es como llama a los articulos.

document.querySelector('h1') De esta parte lo que interesa es lo resaltado en negritas: "h1". Suele ser el marcado de blogger para los títulos. Si en tu plantilla es otro elemento, cámbialo. También puedes añadirle un id y seleccionarlo por el id.

A continuación le indicamos que incluya en ese elemento (el h1 o título) el atributo "style" y una declaración Css para usar como background-image la primera imagen que encuentre en el cuerpo del post. document.querySelector('.articulo-main img') En mi plantilla es un div con clase articulo-main. En otras suele ser .post-body.entry-content

Con esto (sin la última línea del script) ya sería suficiente. Ya tenemos una imagen como fondo del título. Pero quise ir un paso más allá. En los posts antiguos la imagen se verá por duplicado, pues se mantiene visible la imagen en el contenido del artículo y como en muchas ocasiones es una imagen que aporta información no podemos eliminarla.

Así que en los nuevos artículos lo que hago es que si la primera imagen es sólo a efectos decorativos del título le añado una clase hide-img para poder eliminarla del contenido y que sólo quede como fondo del título.

Para eso es la última línea del js: document.querySelector('.articulo-main img.hide-img').remove();

Un poco más de estilo

Ahora ya sólo nos resta aplicar unos estilos chulos para que nuestro título luzca en todo su esplendor. Un tamaño suficiente y un velo entre el texto y la imagen. En mi caso, además de otros detalles, son:

h1 { background-position: center; background-repeat: no-repeat; background-size: cover; height: 100vh; width: 100vw; left: 0; overflow: hidden; font-size: 15vmin; } /* El velo */ h1:before { content: ""; background: rgba(25, 53, 78, 0.6); position: absolute; bottom: 0; left: 0; right: 0; top: 0; }

Personalizar todo el comentario del autor y los borrados

Otros elementos un tanto inaccesibles para personalizar de forma selectiva son los comentarios realizados por el autor del blog y aquellos a los que borramos su contenido.

Captura inspector de código Blogger
Captura inspector de código de Blogger

Blogger añade la clase blog-author no al item que contiene a todo el comentario del autor del blog sino al span con el que marca el nick del autor del blog. Así que usando esa clase sólo podríamos personalizar su nombre y con los selectores de hermanos + | ~ alguna cosilla más.

Lo mismo ocurre con los comentarios a los que se borra su contenido. Blogger añade la clase deleted-comment a un elemento interior del item. En concreto al span que contiene el texto de aviso.

Necesitamos un algo que diferencie a la caja padre de todo el comentario del autor y lo mismo para los comentarios borrados. Con ello ya podremos acceder a esos items con Css.

Por las particularidades de blogger y su construcción del arbol de comentarios no tenemos acceso desde el editor del código para modificar esta parte. Así que de nuevo hay que recurrir a js. En este caso a jQuery, que casi todos los blogs lo tienen ya incluido.

$(document).ready(function() { $(".blog-author").closest("li.comment").addClass("comment-kseso"); $(".deleted-comment").closest("li.comment").addClass("comment-borrado"); });

En mi plantilla cada comentario es un ítem de lista: un li. Con la primera instrucción añado la clase comment-kseso al ítem de mis propios comentarios y a partir de esa clase y vía css ya puedo personalizar cualquier elemento de él y no sólo mi nick.

Te sugiero que si implementas esto cambies el nombre de la clase.

Con la segunda instrucción hago igual con los comentarios borrados. Les añado la clase comment-borrado para manipularlos desde el css y dejarlos al gusto.

Blogger personalización comentarios del autor y los borrados
Blogger personalización comentarios del autor y los borrados

Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Don Kseso Kseso

Comentarios: 12

  1. Dónde se te puede enviar algunas correcciones que debes hacer al blog cuando escribes algo como "La idea eera coloca..."

    ResponderEliminar
    Respuestas
    1. ¿Viste? Ya lo hiciste ;-)

      Gracias.

      Eliminar
  2. Me gusta lo de las imágenes de fondo, pero personalmente no me gusta poner en las entradas cosas que no son propias de dicha entrada. Por ejemplo, si en el futuro cambias de nuevo de plantilla (cosa bastante probable vista tu intensa actividad con estas cosas) tendrás que crear (mantener) algún parche para que te oculte las imágenes "meramente decorativas" ¿o me perdí algo?

    No es que sea un gran problema, porque además entiendo que prácticamente es imposible hacerlo de otra manera, pero bueno, es una manía.

    Por otra parte, con imágenes de ese tamaño no tendrás problemas de miniatura al compartir en redes.

    ResponderEliminar
    Respuestas
    1. ¡Cuánto bueno por aquí! xD

      Hay dos tipos de imágenes posibles, Manolo: las que forman parte de la info del post y las que incluya a efectos decorativos del título mientras mantenga este look.
      Con las primeras no hay drama. A las segundas les añado la clase hide-img

      El día que cambie la plantilla sólo necesitaré mantener la parte del script que elimina del DOM estas últimas (.hide-img)

      document.querySelector('img.hide-img').remove();


      Por otra parte, las imágenes no necesitan ser grandes. Las acomodo con la propiedad background-size: cover al tamaño del título (definido en unidades relativas al vieport (vw, vh).
      Y el velo entre el título y la imagen cumple una doble función:
      .- La principal: legibilidad del texto
      .- La secundaria: enmascarar algo la pérdida de calidad si el valor "cover" la amplía en exceso.

      Un saludo y gracias por el comentario.

      Eliminar
  3. Hola gente.

    Primero que nada, agradecer a Kseso la deferencia de mencionarme en el artículo.

    Luego, la razón de comentar en tu espacio, Oloman. Estuve pensando en eso de andar metiendo código ajeno a la entrada propiamente dicha; y siempre es válido de cara al source final. Si es por tipearlo en el formulario de edición ... amigo, tu neurosis es peor que la mía.
    XD

    Bien, le di una mirada a ese source code resultante, y encontré como media docena de escripts y yuyos varios insertados en el pie de página. Los de Kseso y los que agrega Blogspot. Así que ya no me preocuparía.

    De cualquier forma, siempre se puede agregar como archivo externo. El código (si se "aparece" antes de la carga de las imágenes y comentarios a modificar) puede ser más complejo al agrgarle listeners (por ejemplo), pero al fin sería sólo una llamada, un linkeado, y no estarían sus tripas expuestas en el código fuente.

    Una objeción que no ha aparecido, pero seguramente lo hará, es la de juntar un artilugio de javascript, con uno de JQuery.
    Pero a mi me parece un acierto del autor; porque entendemos que éste es un blog de CSS, y sabemos que JS es una ayuda importante para capturar y modificar estilos que después se "redondean" con CSS ... algo que los diseñadores no tienen obligación de entender y mucho menos de manejar. El mostrar que hay al menos dos maneras de usarlo (puro, y a través de un framework) y que en ambas es realmente comprensible y fácil de interpretar, será una ayuda adicional para que en algún momento quien no tenga mucha idea de programación se interese por estudiar o leer un poco sobre la parte en que JS accede al DOM y a la hoja de estilos.
    De valores random para hacer colores, o fechas para validar campos de formulario ¡ni hablar!. Aprender javascript nos salva de todas las falencias que aún tiene CSS.

    ResponderEliminar
  4. Realmente no es por teclearlo Furoya sino como dije, por una manía personal. Comencé mi sitio cuando no sabía nada de esto (ahora 0, antes -1) metiendo algunas cosas que ahora me obligan a ir manteniendo parches en sucesivas versiones de mi plantilla para que todo guarde la misma línea estética y por eso que lo sufro, comenté lo anterior.

    Por otra parte Kseso supongo que un img.hide-img {display: none;} te haría casi el mismo efecto que la línea JS que propones. Cierto es que con eso la quitas del... ¿se llama DOM? pero total, si buscadores, agregadores y similares no tienen en cuenta esos añadidos o eliminados posteriores ¿para qué molestarse en sumarle al navegador una tarea de "limpieza"?

    ResponderEliminar
    Respuestas
    1. Sí. Tienes toda la razón, Oloman
      La línea de js es redundante (un seguro) al display: none. Pero en el momento de la construcción me resultó más sencillo ello que subir al head, buscar los estilos para las páginas items y añadir la regla css oportuna.
      Porque en el home sí deseo que se muestre la imagen (tenga o no la clase hide-img)

      Y si es por el trabajo del navegador por pasar la escoba... ahí me las den todas xD

      Eliminar
  5. (Parece que nosotros ya no podemos anidar comentarios.)

    Como no tengo un blog, no termino de caer en esos detalles. Pero los entiendo. Quizá una solución sea justamente poner en los inventos agregados una clase extra para hacer así, eliminarlos con CSS usando 'display:none' si ya no son necesarios. Fue una de las opciones que tenía Kseso cuando armaba su nuevo diseño para ocultar esas imágenes duplicadas o para referencia del escript. Otra hubiese sido no poner la imagen, sino la ruta en una variable dentro del JS. Cuando no se use más, se elimina el javascript y esa 'var miImagenOculta="/ruta/imagen.png;' solamente será una línea inofensiva por ahí.


    El punto importante (para mucha gente, a mí me nefrega) es eso que mencionaste sobre los buscadores. Habría que hablar con un verdadero experto en SEO que conozca las mañas de los bots para encontrar código importante. Sé positivamente que si no ponemos la imagen en una etiqueta pero sí su ruta, Google la encuentra igual y la presenta en los resultados. Pero no estoy seguro sobre qué hace si está oculta con estilos; no debería haber diferencia, si no tiene un atributo para forzar a que la ignoren también se debería indexar.
    Claro que la distancia entre lo que deberían y lo que hacen ... puede ser abismal. He tenido discusiones lamentables con "expertos" de escaso criterio por estos temas, y encima que tengo poca paciencia. Así que nunca tuve (ni intenté buscar) un debate serio para entender un poco los mecanismos de indexación que tienen estos buscadores.

    ResponderEliminar
    Respuestas
    1. "(Parece que nosotros ya no podemos anidar comentarios.)

      Mea culpa, Furoya, de la poca cabeza y dedos como morcillas que tengo.
      Toqueteé lo que no debía y... pero cuando tú comentaste ya debería haber estado funcionando la "anidación".

      Y sobre el SEO y esas cosas, mejor no entro... por ignorancia supina xDD

      Eliminar
    2. Ah, bueno! ¡Entonces sirve de algo que hagamos de beta-testers!. Ya encontraste un nuevo ajuste para hacer.

      Y de los SEO mejor yo tampoco hablo, porque me amargo. Aunque debe ser como con los políticos : tienen una justificada mala prensa, pero hay algunos que realmente saben y son decentes.

      Eliminar
  6. Hola Kseso. Hoy estaba buscando justo esto para implementarlo en mi plantilla y recordé que tenías este artículo. Ya he intentado de todo, en el primer código incluso he usado los atributos que usa mi blog pero en realidad mi conocimiento de javascript es casi nulo y no logro implementarlo.

    El código me ha quedado de éste modo una vez que he cambiado los ajustes para tratar de que funcionara.

    [code]
    <b:if cond='data:blog.pageType == "item"'>
    <script type='text/javascript'>
    //<![CDATA[
    document.querySelector('h3').style.backgroundImage =
    'url(' + document.querySelector('.post-body.entry-content img').src + ')';
    document.querySelector('.post-body.entry-content img.hide-img').remove();
    //]]>
    </script>
    </b:if>
    [/code]

    Creí que se trataba de los estilos así que los agregué, pero aún después de esto no he podido hacer que funcione. Espero puedas ayudarme.


    Saludos.

    ResponderEliminar
    Respuestas
    1. Hola Sergio

      Creo que se te pasó el nombre (dir) del blog para poder ver in situ el tema.

      Un saludo

      Eliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap