soy Kseso y esto EsCSS

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 ✎ 16
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

avatar del Editor del blog

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